Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change color of X and Y axis values in Chart.js

I'm using v2.*. However, I can't seem to set the default color for a line chart. I'm mainly looking to set the color of the x/y chart values. I figured the below might do it - but it does nothing to the chart at all.

Chart.defaults.global.defaultColor = 'orange', 

Update

Here's a jsfiddle with live chart. In short, I'm looking to change the color of the labels i.e. Feb 7, 2016, etc etc.

https://jsfiddle.net/o534w6jj/

like image 849
Mike Barwick Avatar asked Feb 13 '16 18:02

Mike Barwick


People also ask

How do you change axis color in ChartJS?

With ChartJS 3, you can change the color of the labels by setting the scales. x. ticks.

How do I change the color of my axis labels?

To set the color for X-axis and Y-axis, we can use the set_color() method (Set both the edgecolor and the facecolor). To set the ticks color, use tick_params method for axes. Used arguments are axis ='x' (or y or both) and color = 'red' (or green or yellow or ...etc.)


1 Answers

Okay, so I figured it out. It's the ticks property I'm looking for...see code below.

See updated jsfiddle: https://jsfiddle.net/o534w6jj/1/

var ctx = $("#weekly-clicks-chart"); var weeklyClicksChart = new Chart(ctx, {     type: 'line',     data: data,     scaleFontColor: 'red',     options: {             scaleFontColor: 'red',         responsive: true,         tooltips: {             mode: 'single',         },         scales: {             xAxes: [{                  gridLines: {                     display: false,                 },                 ticks: {                   fontColor: "#CCC", // this here                 },             }],             yAxes: [{                 display: false,                 gridLines: {                     display: false,                 },             }],         }     }          }); 
like image 92
Mike Barwick Avatar answered Oct 05 '22 08:10

Mike Barwick