changing color only for gridLines at index zero

[elghali]

I am trying to change style of x-axes and y-axes only at index zero, but I want to only show gridlines for yAxes, however if I set the display:false for gridLines under xAxes, the property zeroLineColor doesn't work anymore, here is my options variable:

        xAxes: [
          {
            display: true,
            barPercentage: 0.03,
            stacked: true,
            gridLines: {
              display: false,
              zeroLineColor: '#000',
            },
            scaleLabel: {
              display: true,
              labelString: 'Time',
              fontColor: 'red'
            },
            labels: {
              show: true
            }
          }
        ],
        yAxes: [
          {
            type: 'linear',
            display: true,
            id: 'y-axis-1',
            gridLines: {
              display: true,
              zeroLineColor: '#000'
            },
            labels: {
              show: true
            },
          }
        ]
      }

this code sets the yAxes color at index zero to black but not the xAxes at index zero, obviously because I set its display to false

[etimberg]

@elghali could you post a picture of what you'd like to achieve?

[elghali]

sure,

but without showing the xAxes gridlines, now if I hide the xAxes gridlines, the zeroLineColor stops working,
by the way, i'm using a stacked bar chart and hiding the lower bar to lift the bars so I can have something like a range column chart, I wish this chart type was supported

[etimberg]

@elghali I tried a bunch of combinations to make this work using gridLines.drawBorder which is used here https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L904-L929

However, since it uses the grid line colour it doesn't give the effect that you want. I'm tagging this as an enhancement. I think the best solution is to introduce the following new settings:

• border color
• border width

They might be able to go under a new border option in the axis options as long as the current behaviour is maintained if nothing is specified. I'm happy to look at a PR making this change if you're interested.

[elghali]

should I fork the repo first?

[simonbrunel]

Looks like what is implemented in #4117?

[etimberg]

Yes @simonbrunel that does it 😄

[elghali]

is this pull request merged into master? and, I am using react-chartjs-2, so does it include this fix?

[simonbrunel]

It's not merged yet since we were waiting 2.8 and still need review latest commits. You can checkout the PR, build it, test it and give your feedback, that could help accelerate its integration.

[elghali]

ok, thank you