2

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.

live2
  • 3,771
  • 2
  • 37
  • 46
Erick Ramirez
  • 19
  • 4

1 Answers1

-1

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.

Erick Ramirez
  • 19
  • 4