[Chartjs]-Put sum of values in center of doughnut chart?

by

2👍

✅

There is a plugin for what you want to do: https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel

3👍

As a workaround until the open issue is complete, you could just draw your own total on the canvas element itself.

You will have to manually calculate the x/y position on the canvas (like [150,100] in this example).

var canvas=document.getElementById("myChart");
var ctx=canvas.getContext("2d");
ctx.font="36px verdana";
ctx.fillText("76",150,100);

1👍

I actually ended up doing this:

<div style="position: relative;" data-bind="dxPieChart: {
  //chart initialization code from above...
}">
    <div style="position: absolute; top: 50%; margin-top: -15px; left: 50%; font-size: 30px; line-height: 30px; margin-left: -50px; width: 100px; text-align: center;" data-bind="text: alarmIDs().length"></div>
    <div style="position: absolute; top: 50%; margin-top: 15px; left: 50%; font-size: 15px; line-height: 15px; margin-left: -50px; width: 100px; text-align: center;">alarms</div>
</div>

When it binds the chart it doesn’t overwrite any internal HTML, so this works brilliantly.

Leave a comment