Looking to customize the width and color of the x-axis in Chartjs? While it's straightforward for the y-axis using zeroLineColor and zeroLineWidth, achieving the same effect for the x-axis seems trickier.
If you try adding:
ticks: {
beginAtZero: true
}
The x-axis might change as desired, but this also sets the vertical ticks to start from 0 which is not ideal.
Is there a way to isolate these changes?
scales: {
xAxes: [{
gridLines: {
zeroLineColor: 'black', // EFFECTIVE
zeroLineWidth: 2 // EFFECTIVE
},
display: true
}],
yAxes: [{
gridLines: {
zeroLineColor: 'black', // NOT WORKING
zeroLineWidth: 2, // NOT WORKING
},
id: 'y-axis-0',
display: true,
ticks: {
// beginAtZero: true // prefer not to use this
}
}]
}
The current code setup yields the following outcome:
Although the y-axis settings are taking effect, the x-axis remains unchanged in terms of color and width.
This issue has been observed on version 2.9.4 of the Chartjs library.