Setting color of grid lines changes color of the other axis

[JasperHorn]

Expected Behavior

Changing the color of the x-axis grid lines should not change the color of the y-axis and vice versa.

Current Behavior

The 0-line of the x-axis gets the color of the last line of the y-axis and vice versa. For the x-axis, this even means its own color is overwritten.

Steps to Reproduce

https://codepen.io/GreatMagicalHat/pen/wvgdNaz

Context

I was trying to color the axes separately from the grid. I found an old option on SO, found a minimal reference to how it had been removed in 3.x in the migration guide, and when I tried it, found that it is broken to the point where it doesn't even work for that basic use case.

Environment

• Chart.js version: 3.0.1 (but also on master)
• Browser name and version: Firefox 68 and Chrome 89

[etimberg]

@JasperHorn I believe you are seeing the axis border. drawBorder: false inside the grid configuration will disable it for an axis

[JasperHorn]

@etimberg Ah yes, that does look like a good solution for my use-case. I would still say that the border color depending on the color of the last grid line (which could actually change when the a dataset is added and the scale changes) is a bug.

[etimberg]

The border color only defaults to the grid line color when borderColor is unset. https://www.chartjs.org/docs/latest/axes/cartesian/#border

Perhaps we should default border color differently. @kurkle thoughts?

[JasperHorn]

(as it turns out, removing the border was not a solution for me because the horizontal lines go on top of the vertical ones, like shown in this example: https://codepen.io/GreatMagicalHat/pen/zYNweEy, but luckily for me, I could just use the border styling options because my borders and axes are the same)

The border color doesn't actually default to the grid line color. It defaults to whatever color was used for the last grid line, which isn't quite the same if the grid line color is a scripted property (see examples 2 & 3 in original codepen).

[kurkle]

The border color only defaults to the grid line color when borderColor is unset. https://www.chartjs.org/docs/latest/axes/cartesian/#border

Perhaps we should default border color differently. @kurkle thoughts?

It might be unexpected that when scriptable, its resolved as index: 0. It should probably have a separate context.

I think we could fix couple of things as bugs:

• resolve border with its own context, so it does not provide tick0 value with it, or index: 0
• draw border after grid, so its on top. should be done after all axis grids are drawn (= separate layer).

[etimberg]

I think both of those make sense