Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

enter image description here

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.

like image 203
lampshade Avatar asked Nov 10 '16 08:11

lampshade


People also ask

How do I remove the Y axis gridLines?

Click Secondary Horizontal Gridlines or Secondary Vertical Gridlines, and then click None. Note: These options are only available when a chart has secondary horizontal or vertical axes. Select the horizontal or vertical chart gridlines that you want to remove, and then press DELETE.

How do I remove gridLines in Chartjs?

If you want to hide gridlines in Chart. js, you can use the above code. Yor will have to 'display: false' in gridLines object which is specified on the basis of Axis. You can use 'xAxes' inside scales object for applying properties on the x-axis.


5 Answers

In v3 you can do:

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

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

like image 174
pegido Avatar answered Oct 19 '22 06:10

pegido


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,
        }
    }]
}
like image 43
lampshade Avatar answered Oct 19 '22 04:10

lampshade


This should work

 options: {
     scales: {
          yAxes: [{
               gridLines: {
                  display: false,
              }
          }]
     },
  }
like image 21
eaglebearer Avatar answered Oct 19 '22 04:10

eaglebearer


This worked for me in version 2.8.0 -

scales: {
    yAxes: [{
        gridLines: {
            tickMarkLength: false,
        }
    }]
}
like image 44
monika Avatar answered Oct 19 '22 05:10

monika


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

like image 27
Dy4 Avatar answered Oct 19 '22 06:10

Dy4