[Chartjs]-How to customize border style on Chart.js

by

5👍

✅

Instead of editing all the chart and the Rectangle as in the duplicate, you should do it only for each bar you want to display with dashed lines.

If you take a look at the console (console.log(myChart) provides you a lot of info if you dare go deep in the object), you will see that every bar is instancied in myChart.config.data.datasets[0]._meta[0].data[x],
x being the xth bar of the dataset.

Knowing where you should go, you can now edit the .draw() method.

Here is a simple function you can use to make it work :

function dashedBorder(chart, dataset, data, dash) {

    // edit the .draw() function
    chart.config.data.datasets[dataset]._meta[0].data[data].draw = function() {
        chart.chart.ctx.setLineDash(dash);
        Chart.elements.Rectangle.prototype.draw.apply(this, arguments);

        // put the line style back to the default value
        chart.chart.ctx.setLineDash([1,0]);
    }
}

You can see the result in this jsFiddle.

Leave a comment