How to hide gridlines in Chart.js in JavaScript

In this tutorial, I will explain to you how to remove gridlines from Chart.js in JavaScript.

Let’s first understand why we use Chart.js what is the purpose behind using it.

Chart.js:-  In JavaScript Chart.js defines various types of charts inside it. It comes with the following built-in chart types:-

• Line
• Bar
• Scatter
• Pie
• Bubble etc.

Usage:-

Chart.js is an open-source JavaScript library using which you can add data visualization on your website it is easy to use and implement on your website. It adds interactive graphs and animation to your website.

How You can use Chart.js in your code

Installations

You can install chart.js via npm(Node Package Manager) or bower.

• Using npm

npm install chart.js –save  

• Using Bower 

bower install chart.js –save 

For more information about chart.js installation, you can go to this link:https://www.chartjs.org/docs/2.9.4/getting-started/installation.html

Grid Lines

Grid Lines are the lines that cross the chart plot to show axis division. Gridlines help viewers to show what value is represented by the unlabeled data point. Large or complicated chart gridlines give important clues to the viewers.

                                             

Grid Line Configuration in Chart.js

There are a number of options to allow styling an axis. These are settings to control grid lines.

The grid line configuration is nested under the scale configuration in the gridLines key. It defines options for the grid lines that run perpendicular to the axis. You can use different properties in Grid Line configuration for styling like display with boolean type having default value as true will so the grid lines if we set the value as false it does not display the grid lines for the given axis.

Code:-

• To hide the Grid Lines in Chart.js apply the following lines of code inside your JavaScript using this you can hide gridlines on both axes using the display property.

 

var options={
    scales:{
       xAxes[{   //remove gridLines from x-axis
            gridLines:{
               display:false
            }
           }],
      yAxes:[{    //remove gridLines from y-axis
           gridLines:{
               display:false
             }
            }]
    }
}

Output:-

The grid lines has successfully hide after applying the above lines of code in JavaScript.