Chart.js v2 - hiding grid lines

Question

I am using Chart.js v2 to draw a simple line chart. Everything looks fine, except there are grid lines that I don't want:

The documentation for Line Chart is here: https://nnnick.github.io/Chart.js/docs-v2/#line-chart, but I can't find anything about hiding those "Grid Lines".

How can I remove the grid lines?

Solution 1

I found a solution that works for hiding the grid lines in a Line chart.

Set the gridLines color to be the same as the div's background color.

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }   
        }]
    }
}

or use

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}

Solution 2

options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}

Solution 3

From version 3.x, onwards use this syntax. Refer to chart.js migration guide: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

scales: {
  x: {
    grid: {
      display: false
    }
  },
  y: {
    grid: {
      display: false
    }
  }
}

Solution 4

If you want them gone by default, you can set:

Chart.defaults.scale.gridLines.display = false;

Solution 5

If you want to hide gridlines but want to show yAxes, you can set:

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]

View more solutions

Comments

[adg]

This answer allowed me to keep the scale but not draw the gridlines on the chart.

[Ranny]

This is the correct answer since this is not change anything out the draw area, Thanks Ahmed

[D Dimitrov]

I think this is rather the better answer.

[Kalimah]

Good answer. This is cleaner though: Chart.defaults.scale.gridLines.drawOnChartArea = false;

[Game Unity]

This should be voted higher. I was wondering why none of the answers above were working!

[tilly]

Indeed august 2021, the accepted answers didn't work anymore, but this one did.

[user906573]

Hristo, next time, could you please point to the documentation of the library to help guide the person asking the question. Thank you so much for taking the time.

[Garavani]

@Kalimah: the above (in options) code worked for me. The “cleaner” solution does not work for me with “chartjs-chart-error-bars” plugin

[Ali Bayat Mokhtari]

This should be the accepted answer

[Ashiq Dey]

I was wondering why other solutions are throwing error "Invalid scale configuration for scale: xAxes" it because of version. Chart.js 3+ options are different than that of older version.