235

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:

Grid Lines 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?

13 Answers 13

463

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
            }   
        }]
    }
}
6
  • 4
    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.
    – XCS
    Commented Apr 18, 2016 at 11:24
  • 56
    Or use display:false, instead of "color"
    – Irvine
    Commented Apr 18, 2016 at 11:25
  • 2
    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.
    – Tot Zam
    Commented Nov 9, 2018 at 8:06
  • 7
    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.
    – Rajeshwar
    Commented Jun 7, 2020 at 18:53
  • 1
    gridLines is now grid in ChartJS 3
    – hanumanDev
    Commented Mar 24, 2022 at 13:30
224

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
    }
  }
}
8
  • 15
    This should be voted higher. I was wondering why none of the answers above were working!
    – Game Unity
    Commented Jul 23, 2021 at 22:58
  • 7
    Indeed august 2021, the accepted answers didn't work anymore, but this one did.
    – tilly
    Commented Aug 3, 2021 at 12:20
  • This should be the accepted answer Commented Feb 13, 2022 at 12:02
  • 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.
    – Ashiq Dey
    Commented Mar 28, 2022 at 14:50
  • yes, other solutions no longer work but this does, should be accepted answer Commented Apr 15, 2022 at 17:23
97
options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}
5
  • 12
    This answer allowed me to keep the scale but not draw the gridlines on the chart.
    – adg
    Commented Sep 3, 2018 at 7:40
  • 1
    I think this is rather the better answer.
    – D Dimitrov
    Commented Nov 27, 2020 at 9:07
  • Good answer. This is cleaner though: Chart.defaults.scale.gridLines.drawOnChartArea = false;
    – Kalimah
    Commented Dec 5, 2020 at 13:20
  • @Kalimah: the above (in options) code worked for me. The “cleaner” solution does not work for me with “chartjs-chart-error-bars” plugin
    – Garavani
    Commented Dec 19, 2021 at 10:22
  • this is for v2 of chartjs
    – BDurand
    Commented May 24 at 20:38
29

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

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

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

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

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;
1
  • 2
    This is the correct answer since this is not change anything out the draw area, Thanks Ahmed
    – Ranny
    Commented Sep 3, 2020 at 9:44
9

OK, nevermind.. I found the trick:

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

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,
      },
    },
  },
};
1
  • 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.
    – user906573
    Commented Aug 18, 2021 at 17:07
7

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>

6

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

enter image description here

3

An update for ChartJS 3:

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

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

this did it for me on my react project

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

i hope this helps

0

Very Easiest Way Work In latest version of chart js

 options: {
        scales: {
            y: {
                drawOnChartArea: false
            },
            x: {
                grid: {
                    drawOnChartArea: false
                }
            }
        }
    }
1
  • 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.
    – Community Bot
    Commented Apr 12 at 13:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.