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?

Intermission

Answer 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
            }   
        }]
    }
}

Soneson

This is actually setting the gridLines color to a 0 opacity black (a transparent color). So this should work regardless of the div's background color. – Appleton

Or use display:false, instead of "color" – Soneson

I wanted to keep the scale but lose the gridlines on the back of the chart so this answer did not work for me. – Cliffordclift

While this first answer may get to the desired picture, it is a bit of a hack. The second solution, that actually sets the gridLines display property to false, seems to be more correct. – Hypophyge

This is also removing lines of x axis(single line) and y axis(single line). But i only wanted to remove lines on the graph. So drawOnChartArea: false is doing the right thing. – Hueyhuff

gridLines is now grid in ChartJS 3 – Steven

Answer 2

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
    }
  }
}

Plinth

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

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

This should be the accepted answer – Tortoise

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. – Caddell

yes, other solutions no longer work but this does, should be accepted answer – Lakin

This code can also be used as a short alternative. hides both x and y coordinate lines: Chart.defaults.scale.grid.display = false; – Concelebrate

Just to be clear, options: { scales: { ... } } – Michail

Answer 3

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

Jarad

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

I think this is rather the better answer. – Infecund

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

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

Answer 4

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

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

Hookworm

Answer 5

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

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

Caustic

Answer 6

The code below removes remove grid lines from chart area only not the ones in x&y axis labels

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

Attribute

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

Answer 7

OK, nevermind.. I found the trick:

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }

Haman

Answer 8

In chartjs 3 there is a little difference in accessing this configuration. The name of the property is not gridLines, but grid, as it is shown in the official documentation:

options.gridLines was renamed to options.grid

Source: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#ticks

Here is how it looks:

const options = {
  scales: {
    x: {
      grid: {
        display: false,
      },
    },
  },
};

Territus

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. – Ryter

Answer 9

Please refer to the official documentation:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

Below code changes would hide the gridLines:

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

Hindman

Answer 10

Updated code for ChartJs, version = 4.3.0

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
          grid:{
              display:false
          }
        }
        
      }
    }
  });
</script>

Congratulant

Answer 11

An update for ChartJS 3:

  const options = {
    scales: {
      x: {
        grid: {
          display: false,
        },
      },

      y: {
        grid: {
          // display: false,
          color: 'rgba(217,143,7,0.1)',
        },
      },
    },
}

Steven

Answer 12

this did it for me on my react project

scales: {
    xAxis:{
      grid: {
        display: false
      }
    }
    
}

i hope this helps

Talanian

Answer 13

Very Easiest Way Work In latest version of chart js

 options: {
        scales: {
            y: {
                drawOnChartArea: false
            },
            x: {
                grid: {
                    drawOnChartArea: false
                }
            }
        }
    }

Brittain

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Oldline