javascript - How to customize border style on Chart.js - Stack Overflow

admin管理员组

文章数量:1277901

How to customize border style on Chart.js

Chart.js 2.2.1

By default the border of bars and points is a solid line. If possible, I'd like to draw attention to specific bars or lines by making the border into a dotted or dashed line.

Going through the docs didn't turn up anything useful. Below is what I thought might work

var ctx = document.getElementById("myChart");
var borderColors = ['red','blue','black']
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Black"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3],
            borderColor:borderColors,
            borderWidth:3,
            borderStyle:'dash'//has no effect
        }]
    }
});

Here it is running live. How can I make a border dashed?

EDIT: My question is different from this similar one for two reasons

1. that solution replaces all bar borders with dashed lines, whereas as I pointed out I'd like to style only specific bars within the dataset
2. that solution is exclusively for bar charts (it overrides the rectangle.draw function whereas I mentioned that I'd like to also make point borders dashed (in line charts) for specific points within the dataset.

How to customize border style on Chart.js

Chart.js 2.2.1

By default the border of bars and points is a solid line. If possible, I'd like to draw attention to specific bars or lines by making the border into a dotted or dashed line.

Going through the docs didn't turn up anything useful. Below is what I thought might work

var ctx = document.getElementById("myChart");
var borderColors = ['red','blue','black']
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Black"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3],
            borderColor:borderColors,
            borderWidth:3,
            borderStyle:'dash'//has no effect
        }]
    }
});

Here it is running live. How can I make a border dashed?

EDIT: My question is different from this similar one for two reasons

1. that solution replaces all bar borders with dashed lines, whereas as I pointed out I'd like to style only specific bars within the dataset
2. that solution is exclusively for bar charts (it overrides the rectangle.draw function whereas I mentioned that I'd like to also make point borders dashed (in line charts) for specific points within the dataset.

• javascript
• charts
• chart.js

Share Improve this question Follow edited May 23, 2017 at 12:01 CommunityBot 111 silver badge asked Aug 23, 2016 at 17:14 BeetleJuiceBeetleJuice 40.9k2121 gold badges118118 silver badges180180 bronze badges 3

• 1 Possible duplicate of Change Chart JS Bar Chart Border to Dotted Line – Glen Despaux Jr Commented Aug 23, 2016 at 17:25
• Thanks @GlenDespaux. That solution replaces all bar borders with dashed lines. What I'm trying to do is to draw attention to a specific bar or point (on line charts) by changing just that datapoint's border to dashed – BeetleJuice Commented Aug 23, 2016 at 17:38
• A solution for Chart.js v3 is available here: stackoverflow./a/72424830/2358409 – uminder Commented May 29, 2022 at 15:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： javascriptHow to customize border style on ChartjsStack Overflow