I'm drawing this pie chart:
using this code:
dxPieChart: {
dataSource: dsAlarmsBySeverity,
size: {
width: 275,
height: 150
},
palette: ['#FFFF00', '#FF9900', '#CC3300', '#33CC33', '#0066FF'],
legend: {
backgroundColor: '#FCFCFC',
border: {
color: 'black',
width: .5,
visible: true,
cornerRadius: 10
},
verticalAlign: 'middle'
},
series: [{
type: 'doughnut',
argumentField: 'severity',
valueField: 'count',
label: {
visible: false,
font: {
size: 16
},
connector: {
visible: true,
width: 0.5
},
position: 'columns',
customizeText: function(arg) {
return arg.argumentText
}
},
border: {
color: 'black',
width: .5,
visible: true
},
hoverStyle: {
border: {
color: 'black',
width: .5,
visible: true
}
}
}]
}
Is there a way to add the sum of all values to the center of the donut? Like so:
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With