How to change the width and the color of the x-axis (horizontal axis) in Chartjs? It seems to work using zeroLineColor and zeroLineWidth for the y-axis (vertical one), but it does not work for the x-axis.
If we add:
ticks: {
beginAtZero: true
}
It works as expected, but I don't want the vertical ticks to start from 0.
Is there a way to make this happen?
scales: {
xAxes: [{
gridLines: {
zeroLineColor: 'black', // WORKS
zeroLineWidth: 2 // WORKS
},
display: true
}],
yAxes: [{
gridLines: {
zeroLineColor: 'black', // DOES NOT WORK
zeroLineWidth: 2, // DOES NOT WORK
},
id: 'y-axis-0',
display: true,
ticks: {
// beginAtZero: true // This is what I dont't want to use
}
}]
}
This is the result I get with the previous code: Graphic
As you can see, the x-axis is displayed without changes in color or width.
I'm using version 2.9.4 of the Chartjs library.
Go to the .js of the library (in my case: 'node_modules/chart.js/dist/Chart.bundle.js') and, in the line 12202, you will find this conditional:
if (i === me.zeroLineIndex && options.offset === offsetGridLines) {
Transform it into this:
if ((i === me.zeroLineIndex || (!isHorizontal && i === ticksLength - 1)) && options.offset === offsetGridLines) {
Then, do whatever compression or manipulation of the file you need to do to add it to your project.
It's not the best solution, but it's the one I came up with.