How do I place text in the center of my pie/donut chart?

There are a couple ways to set a value to appear in the center of your pie chart.

  1. Tooltip. When you hover over the node/pie slices you will see a value in the center
  2. valueBox. To display one particular value like a running sum of available pie slices.

The first thing we can do with pie/ring charts is to center the tooltip inside the hole.

tooltip:{
  fontSize:16,
  anchor:'c',
  x:'50%',
  y:'48%',
  sticky:true,
}

Next we will do the same thing but add some custom styling to the tooltip

tooltip:{
  fontSize:16,
  anchor:'c',
  x:'50%',
  y:'48%',
  sticky:true,
  backgroundColor:'none',
  text:'<span style="color: %color;">%t</span><br /><span style="color: %color;">%v</span>'
  </span>
}

We will now show how to make a consistent label in the center based on click. This requires you to use a label.

labels:[
    {
        id : 'lblcenter',
        anchor : 'c',
        x : '50%',
        y : '47%',
        text : 'Place Holder
Text', fontSize: 14 } ],

And our API

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 : '' + plotInfo.text + '
' + '' + p.text + '' } }); });

Last You can put it all together to make a cool looking dashboard!

Next

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.