javascript

Change the color of axis labels in Chart.js

Why should your labels be plain old boring black? In this code snippet, I'll show you how to change the color of axis labels with Chart.js.

const ctx = document.getElementById('my_chart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5"],
        datasets: [{
            label: 'Label Name',
            data: [11, 17, 6, 10, 9]
        }]
    },
    options: {
        scales: {
            x: {
                ticks: {
                    color: '#142ffc'
                }
            }
        }
    }
});

As we all know, Chart.js is an awesome library for creating charts and graphs. One thing that I love about this library, is the fact that we can customize almost everything in our chart. Changing the color of axis labels is not a big deal, but it's something that requires a little bit of knowledge of creating charts using Chart.js

The code that is used to change the color of axis labels is as below:

ticks: {
    color: '#142ffc'
}

Check the live demo of changing axis labels colors

Change x axis labels color

options: {
    scales: {
        x: {
            ticks: {
                color: 'red'
            }
        }
    }
}

The code can be used to change the color of x-axis labels. We are using ticks object color property to assign a color to labels.

Change y-axis labels in Chart.js

options: {
    scales: {
        y: {
            ticks: {
                color: 'red'
            }
        }
    }
}

To change y-axis labels in Chart.js, you can use the above code. It will change the colors of the y-axis labels to red.

Was this helpful?