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?

score 460 · Accepted Answer · edited Nov 26 '18 at 18:19

460

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

edited Nov 26 '18 at 18:19

J Livengood

2,729
1
12
26

answered Apr 18 '16 at 11:22

Irvine

4,801
1
13
5

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 Apr 18 '16 at 11:24
55

Or use display:false, instead of "color" – Irvine Apr 18 '16 at 11:25
I wanted to keep the scale but lose the gridlines on the back of the chart so this answer did not work for me. – adg Sep 03 '18 at 07:39
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 Nov 09 '18 at 08: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 Jun 07 '20 at 18:53
1

gridLines is now grid in ChartJS 3 – hanumanDev Mar 24 '22 at 13:30

score 187 · Answer 2 · edited Jan 13 '22 at 17:25

187

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

edited Jan 13 '22 at 17:25

svarog

9,477
4
61
77

answered Jun 09 '21 at 22:15

Ishan Varshney

2,933
2
9
11

12

This should be voted higher. I was wondering why none of the answers above were working! – Game Unity Jul 23 '21 at 22:58
7

Indeed august 2021, the accepted answers didn't work anymore, but this one did. – tilly Aug 03 '21 at 12:20
This should be the accepted answer – Ali Bayat Mokhtari Feb 13 '22 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 Mar 28 '22 at 14:50
yes, other solutions no longer work but this does, should be accepted answer – code-monkey Apr 15 '22 at 17:23
This code can also be used as a short alternative. hides both x and y coordinate lines: ```Chart.defaults.scale.grid.display = false; ``` – melih sahin Aug 16 '22 at 08:30

score 96 · Answer 3 · answered Aug 20 '18 at 13:33

96

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

answered Aug 20 '18 at 13:33

Vahidrk

1,178
10
5

12

This answer allowed me to keep the scale but not draw the gridlines on the chart. – adg Sep 03 '18 at 07:40
1

I think this is rather the better answer. – D Dimitrov Nov 27 '20 at 09:07
Good answer. This is cleaner though: `Chart.defaults.scale.gridLines.drawOnChartArea = false;` – Kalimah Dec 05 '20 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 Dec 19 '21 at 10:22

score 28 · Answer 4 · edited Jan 09 '20 at 14:46

28

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

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

edited Jan 09 '20 at 14:46

Kees de Kooter

7,078
5
38
45

answered Jun 08 '18 at 22:19

david

1,814
1
16
19

score 17 · Answer 5 · edited Feb 01 '19 at 05:08

17

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

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

edited Feb 01 '19 at 05:08

Akhilesh krishnan

799
2
8
22

answered Feb 01 '19 at 04:00

Kathy

409
4
7

score 11 · Answer 6 · answered Nov 27 '19 at 16:32

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;

answered Nov 27 '19 at 16:32

Ahmed Adewale

2,943
23
19

2

This is the correct answer since this is not change anything out the draw area, Thanks Ahmed – Ranny Sep 03 '20 at 09:44

score 10 · Answer 7 · answered Aug 18 '17 at 17:20

10

OK, nevermind.. I found the trick:

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

answered Aug 18 '17 at 17:20

hygorbudny

109
1
4

Hristo Dzhambazki · Answer 8 · 2021-08-19T13:18:36.437

7

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

edited Aug 19 '21 at 13:18

answered Aug 18 '21 at 14:26

Hristo Dzhambazki

71
1
3

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 Aug 18 '21 at 17:07

Devkinandan Chauhan · Answer 9 · 2022-05-27T05:11:12.343

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

edited May 27 '22 at 05:11

answered Nov 30 '20 at 05:31

Devkinandan Chauhan

1,785
1
17
42

score 4 · Answer 10 · answered Mar 24 '22 at 13:39

An update for ChartJS 3:

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

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

score 2 · Answer 11 · answered Sep 16 '22 at 06:13

2

this did it for me on my react project

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

i hope this helps

answered Sep 16 '22 at 06:13

abdulfrfr

21
2

score 0 · Answer 12 · answered Jun 15 '23 at 08:43

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>

Chart.js v2 - hiding grid lines

12 Answers12

Linked

Related