ZingChart: 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.

Centered Tooltip

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,
}

Example: https://demos.zingchart.com/view/RGOJW6CE

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:'%t
%v'
}

Example: https://demos.zingchart.com/view/HWDNXDTY

Centered Label

We are now moving past tooltip and showing how to display a centered label

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

And using our API we can update that label on click. You don't have to do this, you could leave the label static.

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 + ''
        }
    });    
});

Example: https://demos.zingchart.com/view/NB6YMVS6

Centered ValueBox

A lot like the label example above, you can center your valueBox with similar properties. The main reason you would want to center a valueBox is if you are ONLY displaying one value. The most common is the total pie chart value. We will set the valueBox text to display the pie chart total and then hide all valueBoxe's but one of them using rules.

	{
"type":"ring",
"title":{
  "text":"Centered ValueBox"
},
"plot":{
  "value-box":{
    "text":"%pie-total-value",
    "placement":"center",
    "font-color":"black",
    "font-size":35,
    "font-family":"Georgia",
    "font-weight":"normal",
    "rules":[
      {
        "rule":"%p != 0",
        "visible":false
      }
    ]
  },

Example: https://demos.zingchart.com/view/embed/R9YN3IAK

Lastly you can put all these ideas together to make a cool looking dashboard!

Example: https://demos.zingchart.com/view/B5C95Y9C

Other Centered Things

You can in fact center other items to your chart like images.

labels:[
 {
   x: '50%',
   y: '50%',
   anchor: 'c', //sets alignment from center of label instead of left
   height: 128,
   width: 128,
   backgroundImage: 'https://cdn2.iconfinder.com/data/icons/cat-power/128/cat_purr.png'
 }
],

Send us your best choices for what should be in your pie ring!

Documentation