This is based on the Cmyker update for Chart.js 2. (posted as yet another answer, as I cannot comment yet)
I had a problem with text alignment in Chrome when the legend is displayed, since the height of the chart does not include this, so it does not align correctly in the middle. This is fixed, taking this into account when calculating fontSize and textY.
I calculated the percentage inside the method, not the given value, since I have several of them on the page. It is assumed that your chart has only 2 values (otherwise is it a percentage of?), And the first is the one you want to show the percentage on. I also have many other diagrams, so I check for type = donut. I use donuts to show percentages so that it works for me.
The color of the text seems a bit successful and missed, depending on what things are being done in, etc., so I ran into a problem when resizing text that would change color (between black and primary color in one case, as well as secondary color and white are different), so I "save" any existing fill style, draw text (in the color of the primary data), and then restore the old fill style. (Maintaining the old fill style doesn't seem necessary, but you never know.)
https://jsfiddle.net/g733tj8h/
Chart.pluginService.register({ beforeDraw: function(chart) { var width = chart.chart.width, height = chart.chart.height, ctx = chart.chart.ctx, type = chart.config.type; if (type == 'doughnut') { var percent = Math.round((chart.config.data.datasets[0].data[0] * 100) / (chart.config.data.datasets[0].data[0] + chart.config.data.datasets[0].data[1])); var oldFill = ctx.fillStyle; var fontSize = ((height - chart.chartArea.top) / 100).toFixed(2); ctx.restore(); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle" var text = percent + "%", textX = Math.round((width - ctx.measureText(text).width) / 2), textY = (height + chart.chartArea.top) / 2; ctx.fillStyle = chart.config.data.datasets[0].backgroundColor[0]; ctx.fillText(text, textX, textY); ctx.fillStyle = oldFill; ctx.save(); } } });
var data = { labels: ["Red","Blue"], datasets: [ { data: [300, 50], backgroundColor: ["#FF6384","#36A2EB"], }] }; Chart.pluginService.register({ beforeDraw: function(chart) { var width = chart.chart.width, height = chart.chart.height, ctx = chart.chart.ctx, type = chart.config.type; if (type == 'doughnut') { var percent = Math.round((chart.config.data.datasets[0].data[0] * 100) / (chart.config.data.datasets[0].data[0] + chart.config.data.datasets[0].data[1])); var oldFill = ctx.fillStyle; var fontSize = ((height - chart.chartArea.top) / 100).toFixed(2); ctx.restore(); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle" var text = percent + "%", textX = Math.round((width - ctx.measureText(text).width) / 2), textY = (height + chart.chartArea.top) / 2; ctx.fillStyle = chart.config.data.datasets[0].backgroundColor[0]; ctx.fillText(text, textX, textY); ctx.fillStyle = oldFill; ctx.save(); } } }); var myChart = new Chart(document.getElementById('myChart'), { type: 'doughnut', data: data, options: { responsive: true, legend: { display: true } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script> <canvas id="myChart"></canvas>
rory_za Jul 21 '16 at 12:17 2016-07-21 12:17
source share