Hide gridlines in Chart.js

javascript Share on :

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.

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

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets

Create your own code snippets and search them using our portal and chrome extension

Programming Feeds

Learn something new everyday on Devsheet

Important Links

Join Devsheet Create new snippet Ask a Question Write an article Online JSON Viewer