ChartJS. Change Axis Line Color


Answer :

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

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

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'     } }] 

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 !


Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?