How to remove the line/rule of an axis in Chart.js?

Question

I managed to remove all horizontale lines/rules in my chart using this:

scales: {
       xAxes: [{
        gridLines: {
            display: false
        }  
    }]
}

But I also want to get rid of the rule/bar that represents the Y-axis as well. But I want to keep the labels:

Unfortunately I can't find any option for that. I can only remove the whole axis including labels.

I'm using Chart.js 2.3.

in x axis gridLines u make it as false and looking in the y axis to display the false — Parthasarathy, Nov 10 '16 at 08:31
@Parthasarathy The example show ho to remove the horizontal gridlines. But this option doesn't remove the actual line for the axis (horizontally or vertically doesn't matter). So I'm looking for an option how to remove the actual line of the axis not only the grid lines. — lampshade, Nov 10 '16 at 08:34

lampshade · Accepted Answer · 2016-11-10T10:07:04.333

32

I found a way to remove this line. It's actually called the border of the axis and there's an option for it, see "Grid Line Configuration":

scales: {
    yAxes: [{
        gridLines: {
            drawBorder: false,
        }
    }]
}

edited Nov 10 '16 at 10:07

answered Nov 10 '16 at 09:27

lampshade

2,470
3
36
74

3

This doesnot work. DownVoted because of that (sorry) this code worked for me: gridLines: { display:false } Update it and I will upvote again! – Yorki Bonilla Nov 30 '17 at 12:27
worked for me, I already had display:none but was not sufficient for that borders. thanks – Simone Bagnara Mar 10 '19 at 16:18
1

Doesn't work in v.2.9.0, but fixed in v.3.0.0 https://github.com/chartjs/Chart.js/issues/6876 – Toydor Mar 20 '20 at 15:30

score 4 · Answer 2 · answered Apr 08 '19 at 13:29

4

This should work

 options: {
     scales: {
          yAxes: [{
               gridLines: {
                  display: false,
              }
          }]
     },
  }

answered Apr 08 '19 at 13:29

eaglebearer

2,060
1
13
9

score 4 · Answer 3 · answered Jun 16 '20 at 04:01

4

This worked for me in version 2.8.0 -

scales: {
    yAxes: [{
        gridLines: {
            tickMarkLength: false,
        }
    }]
}

answered Jun 16 '20 at 04:01

monika

114
3

score 4 · Answer 4 · answered Mar 30 '21 at 08:37

4

In v3 you can do:

options: {
  scales: {
    y: {
      grid: {
        drawBorder: false,
      }
    }
  }
}

https://www.chartjs.org/docs/master/axes/styling#grid-line-configuration

answered Mar 30 '21 at 08:37

pegido

629
1
8
13

score 3 · Answer 5 · answered Feb 10 '21 at 22:28

3

The left line is still coming from the x axis grid lines. Changing the 'zeroLineColor' of the x axis to 'transparent' hid it.

xAxes:[{
gridLines:{
zeroLineColor:'transparent'
}}]

Source: https://github.com/chartjs/Chart.js/issues/3950

answered Feb 10 '21 at 22:28

Dy4

687
1
9
20

score 1 · Answer 6 · answered Apr 09 '23 at 15:40

In the version 4.x.x you do it like this:

options: {
  scales: {
    y: {
       border: {
        display: false,
      },
    },
    x: {
      grid: {
        drawOnChartArea: false,
      },
    },
  },
},

The border in y is the option that specifically does what you are asking. I added the x for users that also want to see how to hide the rest of the x axis lines.

score 0 · Answer 7 · edited May 07 '20 at 12:23

0

gridLines: {zeroLineColor: 'transparent'}

edited May 07 '20 at 12:23

Kapil Raghuwanshi

867
1
13
22

answered May 07 '20 at 09:55

Dor Levi

303
2
4

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/low-quality-posts/26055927) – ikos23 May 07 '20 at 12:42
While this code may solve the OP's issue, it is better to add context, or an explanation as to why this solves the OP's problem, so future visitors can learn from your post, and apply this knowledge to their own issues. High Quality Answers are much more likely to be upvoted, and contribute to the value and quality of SO as a platform. You can also add a link to documentation, if that helps. – SherylHohman May 07 '20 at 18:01
@john An answer that's not fully explained, incomplete, or just plain wrong is still an answer. If you think it's a *bad* answer, that's what downvotes are for. See [when to flag an answer as “not an answer”?](https://meta.stackoverflow.com/a/265553/1324) – Paul Roub May 07 '20 at 18:16

score 0 · Answer 8 · answered Apr 10 '21 at 07:52

0

this workerd for me yAxes: [ { gridLines: { display: false, }, }, ],

answered Apr 10 '21 at 07:52

Kuro Neko

16
2

Parthasarathy · Answer 9 · 2016-11-10T08:43:07.193

-2

You can use the scaleLineColor: 'transparent' it will remove the y any x axis

edited Nov 10 '16 at 08:43

answered Nov 10 '16 at 08:30

Parthasarathy

308
2
10

This will remove the labels as well, right? The labels should stay. Only the *line* should be gone. – lampshade Nov 10 '16 at 08:35
you want to remove both the axis lines? – Parthasarathy Nov 10 '16 at 08:39
Actually only the Y-axis line. Is this a global setting? I can't find it in the Chart.js docs. – lampshade Nov 10 '16 at 08:44
new Chart(ctx, { type: 'line', data: data, options: { scales: { yAxes: [{ display: false }] } } }); please have a look on the link it will help you http://www.chartjs.org/docs/#line-chart-chart-options – Parthasarathy Nov 10 '16 at 09:16
Thanks a lot for your help - I found an option to remove the line, which is actually the "´border`" option of the gridlines. – lampshade Nov 10 '16 at 09:28
ha ha ha okie thank you.. give the support flag to my comment :P – Parthasarathy Nov 10 '16 at 09:29

How to remove the line/rule of an axis in Chart.js?

9 Answers9

Linked