[Chartjs]-Removing axes lines on chart.js

by

6👍

✅

You need to set the drawBorder property of grid-lines to false in order to remove those axis lines, like so :

...
scales: {
   xAxes: [{
      scaleLabel: {
         display: true,
         labelString: 'Volunteer Hours',
      },
      gridLines: {
         display: false,
         drawBorder: false //<- set this
      },
   }],
   yAxes: [{
      gridLines: {
         display: false,
         drawBorder: false //<- set this
      }
   }]
}
...

4👍

You can set display: false in your axis object

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

0👍

The other answers are correct for different versions of chart.js, but as of Jan 2020, with version 2.9.3, I was able to resolve the issue by nesting display: false inside of gridlines as follows:

    ...
  , options:
      scales: {
        xAxes: [{
          gridLines: {
              display: false
          },
    ...

Here’s a related GitHub issue.

Leave a comment