https://masteringjs.io/tutorials/chartjs/axis-label-color
https://stackoverflow.com/questions/35383677/change-color-of-x-and-y-axis-values-in-chart-js
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,
},
}],
}
}
});
With ChartJS 3, you can change the color of the labels by setting the scales.x.ticks.color and scales.y.ticks.color options. For example, below is how you can make the Y axis labels green and the X axis labels red.
Note that the below doesn't work in ChartJS 2.x, you need to use ChartJS 3.
const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
label: 'Example Data',
data: [12, 19, 3, 5, 2, 3],
}]
},
// Configuration options go here
options: {
responsive: true,
scales: {
y: {
ticks: { color: 'green', beginAtZero: true }
},
x: {
ticks: { color: 'red', beginAtZero: true }
}
}
}
});Below is a live example.
You can use any color format supported by ChartJS, including hex codes. For example, below is an alternative approach for setting the Y axis ticks to red and X axis ticks to green.
options: {
responsive: true,
scales: {
y: {
ticks: { color: '#00ff00', beginAtZero: true }
},
x: {
ticks: { color: '#ff0000', beginAtZero: true }
}
}
}
