How to add border in chartjs?

Question

I'm trying to find out how to add border in chart area but it seems all I've been found is only applicable for datasets and the whole chart. Below code does not work.

Here is my code:

var myChart = new Chart(ctx, {
    type: 'bar',
    gridLines: {
        borderWidth: {
            top: 1,
            right: 0,
            bottom: 0,
            left: 1
        },
        borderColor: '#6B7280',
    },
}

(output wanted) add 5px green border around chart area except label

score 1 · Answer 1 · answered Jan 12 '21 at 11:43

1

There is no default build in way to achieve this, if you want this you will have to write a custom plugin for it: https://www.chartjs.org/docs/latest/developers/plugins.html

answered Jan 12 '21 at 11:43

LeeLenalee

27,463
6
45
69

shahrooz bazrafshan · Answer 2 · 2021-01-13T08:37:59.413

0

you can wrap your canvas with a div tag and set border to it, if labels are out of it you can set padding-bottom & left to contains it

edited Jan 13 '21 at 08:37

answered Jan 12 '21 at 12:04

shahrooz bazrafshan

545
4
17

this is what I described in my question, that only in datasets we can put borders. My question is how to put borders around the chartarea *excluding the labels*? Please reread the question carefully :) – アリ・ナディム Jan 12 '21 at 16:23
sorry, i changed my answer – shahrooz bazrafshan Jan 13 '21 at 08:38

How to add border in chartjs?

2 Answers2