Chart.js: Hide Vertical Grid Lines

Created on 9 Jun 2016 · 9Comments · Source: chartjs/Chart.js

I'd like to know if there's an alternative to 1.0's { scaleShowVerticalLines: false }.
I need to hide the vertical grid lines but not the labels. I've tried scales.xAxes.display: false with no success.

Source

lucasengel

Most helpful comment

@lucasengel you're close, the following will do it:

var chartInstance = new Chart(ctx, {
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          drawOnChartArea: false
        }
      }]
    }
  }
});

Some additional details are in the Grid Lines section in http://www.chartjs.org/docs/#scales-common-configuration

etimberg on 9 Jun 2016

👍10

All 9 comments

@lucasengel you're close, the following will do it:

var chartInstance = new Chart(ctx, {
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          drawOnChartArea: false
        }
      }]
    }
  }
});

Some additional details are in the Grid Lines section in http://www.chartjs.org/docs/#scales-common-configuration

etimberg on 9 Jun 2016

👍10

It worked! Thanks for the really fast answer, @etimberg.

lucasengel on 9 Jun 2016

You should use gridLines.display now instead of gridLines.drawOnChartArea

var chartInstance = new Chart(ctx, {
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        gridLines: {
          display: true
        }
      }]
    }
  }
});