Click for center tooltip on pie and ring charts

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    zingchart.bind('myChart', 'node_click', function(p) {
      //console.log(p)
      var plotInfo = zingchart.exec(p.id, 'getobjectinfo', {
        object: 'plot',
        plotindex: p.plotindex
      });

      //console.log(plotInfo)
      zingchart.exec(p.id, 'updateobject', {
        type: 'label',
        id: 'lblcenter',
        data: {
          text: '<span style="color:' + plotInfo.backgroundColor1 + '">' + plotInfo.text + '</span><br>' +
            '<span style="color:' + plotInfo.backgroundColor1 + '">' + p.text + '</span>'
        }
      });
    });

    var myConfig = {
      type: "pie",
      title: {
        text: 'Click For Tooltip'
      },
      plot: {
        slice: 60,
        detach: false,
        cursor: 'pointer',
        valueBox: {
          text: "%npv%"
        },
        tooltip: {
          visible: false
        },
      },
      legend: {
        verticalAlign: "bottom",
        align: "center"
      },
      labels: [{
        id: 'lblcenter',
        anchor: 'c',
        x: '50%',
        y: '47%',
        text: 'Place Holder<br>Text',
        fontSize: 14
      }],
      series: [{
          values: [50],
          text: "Thing 1",
        },
        {
          values: [35],
          text: "Thing 2"
        },
        {
          values: [20],
          text: "Thing 3"
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'></div>
</body>

</html>

zingchart.bind('myChart', 'node_click', function(p) {
  //console.log(p)
  var plotInfo = zingchart.exec(p.id, 'getobjectinfo', {
    object: 'plot',
    plotindex: p.plotindex
  });

  //console.log(plotInfo)
  zingchart.exec(p.id, 'updateobject', {
    type: 'label',
    id: 'lblcenter',
    data: {
      text: '<span style="color:' + plotInfo.backgroundColor1 + '">' + plotInfo.text + '</span><br>' +
        '<span style="color:' + plotInfo.backgroundColor1 + '">' + p.text + '</span>'
    }
  });
});

var myConfig = {
  type: "pie",
  title: {
    text: 'Click For Tooltip'
  },
  plot: {
    slice: 60,
    detach: false,
    cursor: 'pointer',
    valueBox: {
      text: "%npv%"
    },
    tooltip: {
      visible: false
    },
  },
  legend: {
    verticalAlign: "bottom",
    align: "center"
  },
  labels: [{
    id: 'lblcenter',
    anchor: 'c',
    x: '50%',
    y: '47%',
    text: 'Place Holder<br>Text',
    fontSize: 14
  }],
  series: [{
      values: [50],
      text: "Thing 1",
    },
    {
      values: [35],
      text: "Thing 2"
    },
    {
      values: [20],
      text: "Thing 3"
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 400,
  width: '100%'
});