Chart.js: Independently control display of horizontal and vertical grid lines

[lonerzzz]

I apologize if this is a duplicate but did not find this enhancement requested so far. I suggest that it would make sense to independently enable the display of horizontal and vertical grid lines. For example, bar charts don't really need a vertical grid line so having the ability to disable it while retaining the horizontal lines would make sense.

[etimberg]

@lonerzzz you can toggle the grid lines per axis:

var chartInstance = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          displayOnChartArea: false, // hides the grid lines from this axis
        }
      }],
      yAxes: [{
        gridLines: {
          drawBorder: false, // needed to hide line at left edge from Y scale. Added in v2.1.4
        }
      }]
    }
  }
});

[lonerzzz]

Thanks for the clarification and quick response. I misunderstood at which level the displayOnChartArea attribute could be applied.

[etimberg]

No problem. the docs will be clearer as soon as the site is updated by @nnnick They updates are already in the markdown files in the docs folder

[lucasengel]

If someone stumbles upon this issue anytime displayOnChartArea is now drawOnChartArea