I am using Chart.js 2.8.0 trying to get rid of the X/Y axis border.
With gridLines { showBorder: false }}
I am still seeing the X axis border.
I also have the color set to 0 alpha, all the other lines on X and Y are gone except for the bottom one on the X axis that just wont go away.
Tries some other options like drawBorder: false
and scaleLineColor: "rgba(0,0,0,0)",
none affected the bottom line on the X axis.
This is my chart configurations
type: 'line',
data: {
datasets: [{
label: '',
data: [],
backgroundColor: [],
borderWidth: 1
}]
},
options: {
scaleLineColor: "rgba(0,0,0,0)",
layout: {
padding: {
top: 20
}
},
legend: {
display: false
},
scales: {
gridLines: {
showBorder: false
},
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}],
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
ticks: {
beginAtZero: true,
display: false,
}
}]
}
}
};
After some time fiddling with it I have found the solution zeroLineColor: 'transparent' did the trick. Found it here https://github.com/chartjs/Chart.js/issues/3950
scales: {
xAxes: [{
gridLines: {
zeroLineColor: 'transparent'
},
}],
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