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?
This question is related to
javascript
chart.js2
options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
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:
gridLines: {
display:false
}
OK, nevermind.. I found the trick:
scales: {
yAxes: [
{
gridLines: {
lineWidth: 0
}
}
]
}
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;
If you want to hide gridlines but want to show yAxes, you can set:
yAxes: [{...
gridLines: {
drawBorder: true,
display: false
}
}]
If you want them gone by default, you can set:
Chart.defaults.scale.gridLines.display = false;
Source: Stackoverflow.com