Chart.js: Coloring an axis line separately from gridLines

[Zamaroth]

Expected Behavior

Axis line should have a separate color option.

Current Behavior

Axis line color is set by scales.yAxes.gridLines.color option. That doesn't allow to have different color for axisLine and gridLines

[etimberg]

To anyone looking to implement this, I believe this would involve changing https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L728-L729 to read from new properties instead of the grid line colours.

[mikeott]

This can be done with zeroLineColor

Example:

yAxes: [{
    gridLines: {
        zeroLineColor: '#ffcc33'
    }
}]

Or zeroLineColor: 'transparent' to make it invisible.

FYI I'm running charts 2.5.0 and I'm not sure how far back this is supported.

[Zamaroth]

@mikeott zeroLineColor wont really do it. Check the pull request, I explained it there in the first review comments #4058

[mikeott]

@Zamaroth Hmm..I'm not sure I understand the difference. The solution I mentioned does let you change the axis line colour (yAxes and xAxes) independently of the grid line colours, as demonstrated in your images.

[Zamaroth]

@mikeott it does but zeroLineColor is tied to the index at value 0 not the first line, so it depends on the values the chart has

[mikeott]

@Zamaroth Roger that.

[SandeepThomas]

Is this still not possible?

[matheusrezende]

Any thoughts on this? @SandeepThomas did u manage to find a solution?

@Zamaroth what is the status of the PR? I checked and it does not seem to have been released yet

[darin-cardin]

This can be done with zeroLineColor

Example:

yAxes: [{
    gridLines: {
        zeroLineColor: '#ffcc33'
    }
}]

Or zeroLineColor: 'transparent' to make it invisible.

FYI I'm running charts 2.5.0 and I'm not sure how far back this is supported.

@mikeott exactly what i was looking for. Thnks!
zeroLineColor : red

[pontusntengnas]

@mikeott it does but zeroLineColor is tied to the index at value 0 not the first line, so it depends on the values the chart has

@Zamaroth That picture shows exactly what I want. I am interested in the properties you call yAxes axisColor and xAxes axisColor but I cant seem to find them in any documentation or elsewhere. How did you achieve that red and green color? Thanks!

[kailynnelson]

@pontusntengnas @Zamaroth Also wondering this! I use display: none for gridLines because I don't want the ones in the background, but I do want the x- and y-axes themselves, and I want to give them a darker color than the default light gray.

I've tried axisColor, borderColor, zeroLineColor... none of them change anything.

[kailynnelson]

@pontusntengnas @Zamaroth Also wondering this! I use display: none for gridLines because I don't want the ones in the background, but I do want the x- and y-axes themselves, and I want to give them a darker color than the default light gray.

I've tried axisColor, borderColor, zeroLineColor... none of them change anything.

@pontusntengnas @Zamaroth I resolved my issue, at least. Very counterintuitive, but here's what worked for me:

scales: {
    xAxes: [{ 
        gridLines: {
            color: 'red', 
            display: false, 
        },
        ticks: { fontSize: 10 },
    }],
    yAxes: [{ 
        gridLines: { 
            color: 'blue', 
            display: false
        },
    }],
}

This makes the x-axis red and y-axis blue. It does not show gridLines.

[Zamaroth]

@pontusntengnas @kraenels at the time, what i showed in the picture wasnt possible in the master branch. i made a fork where i implemented these features and refactored some problems with grid lines. (see #4117)
the implementation however never made it into master as far as i know, after several unfulfilled requests for proper review.
it was later picked up in #5480, but still isnt approved... so still probably isnt fully possible in master

[benmccann]

@Zamaroth sorry for the delay in getting your PR merged. I left a couple comments on #5480 awhile back, but didn't get any response. If you're still interested in picking it back up and getting it in, I'd recommend joining the #dev Slack channel and asking about it so we can talk through any issues and figure out how to get it merged. I'd start with rebasing #5480 and addressing the comments on it

[huyit88]

Hi All,
I read the document about styling grid line.
But i can't find the way to change the first line color of y-Axes and x-Axes.
Could you please show me if we have any way to show like below chart? I am converting ADF chart to chartjs. Thanks!