Mar 29, 2022
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, {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
label: 'Example Data',
data: [12, 19, 3, 5, 2, 3],
}]
},
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 }
}
}
}
