Search code snippets, questions, articles...

Hide gridlines in Chart.js

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.
//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
               }
            }]
       }
    }
});
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

Live Demo


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

Chart.js is a library which is used to create visual charts on your website or javascript based mobile app. This is an open-source library that you can use and fork on Github.

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?
0 Comments