ChartJS. Change axis line color

问题:

I wanna know if it's possible to change the color of the chart axis using ChartJS.

Thanks

回答1:

I know this question was asked over 2 years ago and the OP has already marked a correct answer, but I have a solution to the problem that the OP mentioned in the comments of the marked answer and I'd like to solve it to save other people some time.

But this changes the color of the axis and all the gridLines, what if I just want to change the axis color? For example, I want the axis line solid black and the grid lines grey.

If you're trying to achieve this, then the marked answer won't do it for you but the following should:

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

回答2:

you can change the color by scales configuration under chart options:

type: '...',
data: {...},
options: {
       scales: {
              xAxes: [{gridLines: { color: "#131c2b" }}],
              yAxes: [{gridLines: { color: "#131c2b" }}]
              }
    }

回答3:

In the Charjs.JS to style the scale label and ticks we can use below settings.

options: {     
           scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'X axe name',
                                fontColor:'#000000',
                                fontSize:10
                            },
                            ticks: {
                               fontColor: "black",
                               fontSize: 14
                              }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Y axe name',
                                fontColor: '#000000',
                                fontSize:10
                            },
                            ticks: {
                                  fontColor: "black",
                                  fontSize: 14
                            }
                        }]
                 }
         }

Please refer the link for all the properties. Study all the property before implementation.

Happy coding !