Hide gridlines in Chart.js

javascript Share on :

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.

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

🤔 Similar code snippets

Join Devsheet Ask a Question