How to change the color of a specific y-axis in chart.js?

Member

by ryleigh , in category: Javascript , 7 months ago

How to change the color of a specific y-axis in chart.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by raphael_tillman , 7 months ago

@ryleigh 

To change the color of a specific y-axis in Chart.js, you can use the scales.yAxes option in the configuration of your chart.


Here is an example of how you can change the color of a specific y-axis:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5, 2, 3, 20],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    fontColor: 'red' // Change the font color of the y-axis here
                }
            }]
        }
    }
});


In this example, the fontColor property is used to change the color of the text on the y-axis to red. You can also use other properties like gridLines and title to further customize the appearance of the y-axis.