javascript

Hide gridlines in Chart.js

September 14, 2022

We are describing here to hide gridlines in charts created using Chart.js library. If you are using version 2 of Chart.js, use the below code. For version 3 code scroll more.

# Chartjs version - 3.0.0 and above

//If you are using Chart js version 2
var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
       labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
       datasets: [{
            label: '# of Votes',
            data: [90, 60, 30, 50, 30, 80],
       }]
    },
    options: {
       scales: {
        x: {
          grid: {
            display: false
          }
        },
        y: {
          grid: {
            display: false
          }
        }
      }
    }
});

Live Demo

# Chartjs version - 2.x

//If you are using Chart js version 2
var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
       labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
       datasets: [{
            label: '# of Votes',
            data: [90, 60, 30, 50, 30, 80],
       }]
    },
    options: {
       scales: {
            xAxes: [{
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               gridLines: {
                  display: false
               }
            }]
       }
    }
});

If you want to hide gridlines in Chart.js, you can use the above code. You will have to 'display: false' in gridLines object which is specified on the basis of Axis. You can use 'xAxes' inside the scales object for applying properties on the x-axis. For the y-axis, you can use 'yAxes' property, and then you can specify the properties which you want to apply.

Hide gridlines for Chart.js Version 3 and above

var ctx = document.getElementById('my_chart').getContext('2d');

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
       labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
       datasets: [{
            label: '# of Votes',
            data: [90, 60, 30, 50, 30, 80],
       }]
    },
    options: {
       scales: {
            x: {
               grid: {
                  display: false
               }
            },
            y: {
               grid: {
                  display: false
               }
            }
       }
    }
});

If you are using Chart.js version 3.x or higher then you can use the above code snippet to hide the gridlines in charts plotted using library Chart.js

Was this helpful?