Adding Label to Donut chart in the center

Hi Shaun,
I would like to add a label which shows the total count of the donut chart in the center. Could you please guide me in achieving the same using Arcadia in-built features or do we need to write a custom style(JS) for the same.

1 Like

@Deepika there is no out of the box feature to place total in the center. You will need to use custom style (JS) to manually generate the totals and place text object in the middle of the pie chart.

Custom Style (JS) Example

return function () {
  var f = function() {};

f.version="1";

f.afterDraw= function () {

// Arcadia API to get query results
var d = arcapi.dataResult();

// Obtain query results
var rows = d.rows();

// If there's no results , return 
if (rows.length === 0) {
    return;
}

console.log(rows);

// Calculate total
var total = 0;

for (var i = 0; i < rows.length; i++) {
  console.log(rows[i]);
  total += +rows[i][1];
  
}

console.log(total);

var di = d3.select("#" + arcapi.chartId())
 .append("div")
 .style("font-size","2.25rem") 
 .style("font-weight","500")
 .style("text-align","center")
 .style("position", "absolute")
 .style("left", "35%")  //  **** CHANGE FOR ALIGNMENT
 .style("top", "40%")  // **** CHANGE FOR ALIGNMENT
 .style("padding-top","0.375rem")
 .style("color","rgb(16, 16, 16)");
 
 var format = d3.format(".2s");
 
 // Show total
 di.text(format(total));
 return;
};

return f;

}();
3 Likes

@shaun, Thanks a ton! :smile: :+1: