chart.js 2.1
by Vikhyath
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>JavaScript
Chart.pluginService.register({
afterUpdate: function (chart) {
var a=chart.config.data.datasets.length -1;
for (let i in chart.config.data.datasets) {
for(var j = chart.config.data.datasets[i].data.length - 1; j>= 0;--j) {
if (Number(j) == (chart.config.data.datasets[i].data.length - 1))
continue;
var arc = chart.getDatasetMeta(i).data[j];
arc.round = {
x: (chart.chartArea.left + chart.chartArea.right) / 2,
y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
radius: chart.innerRadius + chart.radiusLength / 2 + (a * chart.radiusLength),
thickness: chart.radiusLength / 2 - 1,
backgroundColor: arc._model.backgroundColor
}
}
a--;
}
},
afterDraw: function (chart) {
var ctx = chart.chart.ctx;
for (let i in chart.config.data.datasets) {
for(var j = chart.config.data.datasets[i].data.length - 1; j>= 0;--j) {
if (Number(j) == (chart.config.data.datasets[i].data.length - 1))
continue;
var arc = chart.getDatasetMeta(i).data[j];
var startAngle = Math.PI / 2 - arc._view.startAngle;
var endAngle = Math.PI / 2 - arc._view.endAngle;
ctx.save();
ctx.translate(arc.round.x, arc.round.y);
console.log(arc.round.startAngle)
ctx.fillStyle = arc.round.backgroundColor;
...