I managed to remove all horizontale lines/rules in my chart using this:
scales: {
xAxes: [{
gridLines: {
display: false
}
}]
}
But I also want to get rid of the rule/bar that represents the Y-axis as well. But I want to keep the labels:
Unfortunately I can't find any option for that. I can only remove the whole axis including labels.
I'm using Chart.js 2.3.
Click Secondary Horizontal Gridlines or Secondary Vertical Gridlines, and then click None. Note: These options are only available when a chart has secondary horizontal or vertical axes. Select the horizontal or vertical chart gridlines that you want to remove, and then press DELETE.
If you want to hide gridlines in Chart. js, you can use the above code. Yor will have to 'display: false' in gridLines object which is specified on the basis of Axis. You can use 'xAxes' inside scales object for applying properties on the x-axis.
In v3 you can do:
options: {
scales: {
y: {
grid: {
drawBorder: false,
}
}
}
}
https://www.chartjs.org/docs/master/axes/styling#grid-line-configuration
I found a way to remove this line. It's actually called the border
of the axis and there's an option for it, see "Grid Line Configuration":
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
}
}]
}
This should work
options: {
scales: {
yAxes: [{
gridLines: {
display: false,
}
}]
},
}
This worked for me in version 2.8.0 -
scales: {
yAxes: [{
gridLines: {
tickMarkLength: false,
}
}]
}
The left line is still coming from the x axis grid lines. Changing the 'zeroLineColor' of the x axis to 'transparent' hid it.
xAxes:[{
gridLines:{
zeroLineColor:'transparent'
}}]
Source: https://github.com/chartjs/Chart.js/issues/3950
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With