[Chartjs]-How to remove the line/rule of an axis in Chart.js?

by

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,
        }
    }]
}

4👍

This should work

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

4👍

This worked for me in version 2.8.0 –

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

4👍

In v3 you can do:

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

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

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

1👍

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.

0👍

gridLines: {zeroLineColor: 'transparent'}

0👍

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

-2👍

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

Leave a comment