[Chartjs]-How to remove grid on chart.js

by

5👍

✅

I am now using version 2.0Alpha, same as you.

Updated Documentation Link

Below is an example for a simple bar chart without grid lines.

You need to set the ‘gridLines’ key on the y and xAxis keys of the options object. 

window.onload = function() {

  var ctx = document.getElementById("canvas").getContext("2d");

var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: "rgba(151,187,205,0.5)",
            data: [100,99,98,97,96,95,94]
        }]
    };
    
  window.myBar = new Chart(ctx).Bar({
      data: barChartData,
      options: {
          responsive: true,
          scales: {
            xAxes: [{
              gridLines: {
                show: true
              }
            }],
            yAxes: [{
              gridLines: {
                show: false
              }
            }]
          }
      }
  });

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0-alpha/Chart.min.js"></script>

<div>
  <canvas id="canvas"></canvas>
</div>

11👍

On v3 (Updated docs) is changed to

options: {
  scales: {
    x: {
      grid: {
        display: false
      }
    },
    y: {
      grid: {
        display: false
      }
    }
  },
}

0👍

Try it with:

xAxis: {
    gridLineWidth: 0                
},
yAxis: {
    gridLineWidth: 0,
    minorTickInterval: null
}

Add this to the chart data,

Leave a comment