Change the color of axis labels in Chart.js

javascript Share on :

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.

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets