Set Axis Label Color in ChartJS
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, {
// 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 }
}
}
}
Did you find this tutorial useful? Say thanks by starring our repo on GitHub!