score:5

Accepted answer

made a few more adjustments and finally got it.this does exactly what you want:

    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;
                        ctx.beginpath();
                        //ctx.arc(arc.round.radius * math.sin(startangle), arc.round.radius * math.cos(startangle), arc.round.thickness, 0, 2 * math.pi);
                        ctx.arc(arc.round.radius * math.sin(endangle), arc.round.radius * math.cos(endangle), arc.round.thickness, 0, 2 * math.pi);
                        ctx.closepath();
                        ctx.fill();
                        ctx.restore();
                    }
                }
        },
    });

fiddle - http://jsfiddle.net/tgyxmklj/1/

score:0

this is not the exact answer that you might be looking for but this was my requirement to get rounded edges for multiple datasets. this one rounds off one color in each doughnut dataset.

i used the answer at chart.js doughnut with rounded edges and text centered and made some changes. here is the code:

        // round corners
    chart.pluginservice.register({
        afterupdate: function (chart) {
            if (chart.config.options.elements.arc.roundedcornersfor !== undefined) {
                var a=chart.config.data.datasets.length -1;
                for (let i in chart.config.data.datasets) {
                    var arc = chart.getdatasetmeta(i).data[chart.config.options.elements.arc.roundedcornersfor];

                    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) {
            if (chart.config.options.elements.arc.roundedcornersfor !== undefined) {
                var ctx = chart.chart.ctx;
                for (let i in chart.config.data.datasets) {
                    var arc = chart.getdatasetmeta(i).data[chart.config.options.elements.arc.roundedcornersfor];
                    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;
                    ctx.beginpath();
                    ctx.arc(arc.round.radius * math.sin(startangle), arc.round.radius * math.cos(startangle), arc.round.thickness, 0, 2 * math.pi);
                    ctx.arc(arc.round.radius * math.sin(endangle), arc.round.radius * math.cos(endangle), arc.round.thickness, 0, 2 * math.pi);
                    ctx.closepath();
                    ctx.fill();
                    ctx.restore();
                }
            }
        },
    });

fiddle : http://jsfiddle.net/n6vlv1zv/

hope it brings you one step closer.


Related Query

More Query from same tag