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?
Advertisement
Answer
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.
JavaScript
x
15
15
1
var options = {
2
scales: {
3
xAxes: [{
4
gridLines: {
5
color: "rgba(0, 0, 0, 0)",
6
}
7
}],
8
yAxes: [{
9
gridLines: {
10
color: "rgba(0, 0, 0, 0)",
11
}
12
}]
13
}
14
}
15
or use
JavaScript
1
15
15
1
var options = {
2
scales: {
3
xAxes: [{
4
gridLines: {
5
display:false
6
}
7
}],
8
yAxes: [{
9
gridLines: {
10
display:false
11
}
12
}]
13
}
14
}
15