[Chartjs]-ChartJS 2 How to globally remove xAxis gridLines?

by

3👍

✅

You can set the defaults for this. You can set it in the scale default so it does it for all the chart types and scales. If you specifically want to hide the X axis gridLines only you need to set it on chart type level.

Chart.defaults.scale.gridLines.display = false // hides all the gridLines in all charts for all axes
Chart.defaults.line.scales.xAxes[0].gridLines = {
  display: false
} // Hides only the X axes gridLines in all line charts

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

Leave a comment