10👍
These settings worked for me:
gridLines: {
color: "transparent",
display: true,
drawBorder: false,
zeroLineColor: "#ccc",
zeroLineWidth: 1
}
http://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration
- [Chartjs]-How to show percentage (%) in chart js
- [Chartjs]-Unable to parse color in line chart (angular-chart.js)
5👍
This also seems to work:
gridLines: {
lineWidth: 0,
zeroLineWidth: 1
}
2👍
The other answers weren’t working for me, I believe because how you do this has changed with Chart.js 3.x
To achieve the chart in the question in 3.x, you need the below options object.
const options = {
scales: {
x: {
grid: {
lineWidth: 0,
drawBorder: false,
}
},
y: {
grid: {
lineWidth: context => context.tick.value == 0 ? 1 : 0 //Set only 0 line visible
}
}
}
More info that helped me solve this
Chart.js how to use scriptable options
- [Chartjs]-Chart.js legend took up too much spaces
- [Chartjs]-How to set default colour for bars in Chart.js
0👍
Great solution from Ted Whitehead. I found this also works with simply;
gridLines: {
color: "transparent"
}
- [Chartjs]-How can I control the placement of my Chart.JS pie chart's legend, as well as its appearance?
- [Chartjs]-Chart.JS Mixed Chart – Bars Not Showing
Source:stackexchange.com