Chrome Extension

Hide gridlines in Chart.js

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.

Was this helpful?
0 Comments
Join Devsheet Ask a Question