3 thoughts on “Coloring an axis line separately from gridLines

  1. 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.

  2. @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.

  3. @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

Comments are closed.