0👍
I think its because you’re registering two beforeDraw functions. These are not bound to a particular chart. If you want the text to refer to data from your chart, you’re going to have to update it to use data in the chart object.
To do this, I’ve added title to the options you pass in (this has the disadvantage of displaying a title on each doughnut, but you can probably work around that). Then the onDraw function uses that title text to display in the centre of the doughnut.
var promisedDeliveryChart = new Chart(document.getElementById('myChart1'), {
type: 'doughnut',
elementById:['myChart1'],
data: data2,
options: {
responsive: true,
legend: {
display: false
},
title: {
display: true,
text: 'November'
}
}
});
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
console.log (chart.options.title.text);
var text = chart.options.title.text;
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
I’ve updated your fiddle.
- Chartjs-Resize bars' chart in ReactChartJS
- Chartjs-Creating charts (charts.js) values coming from SQLite database using AngularJS
Source:stackexchange.com