[Chartjs]-Change X and Y axis font color

by

53👍

✅

$(function(){
var ctx = document.getElementById("myChart");
//Chart.defaults.global.defaultFontColor='red';
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
       legend:{labels: {fontColor: 'orange'}},
      title: {
            display: true,
            fontColor: 'blue',
            text: 'Custom Chart Title'
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    fontColor: 'red'
                },
            }],
          xAxes: [{
                ticks: {
                    fontColor: 'green'
                },
            }]
        } 
        
    }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

You can use fontColor inside ticks/label/legend:labels for a particular axis,

options: {
        legend: {
             labels: {
                  fontColor: 'orange'
                 }
              },
        title: {
            display: true,
            fontColor: 'blue',
            text: 'Custom Chart Title'
        }     ,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    fontColor: 'red'
                },
            }],
          xAxes: [{
                ticks: {
                    fontColor: 'green'
                },
            }]
        } 

    }

or change the defaultFontColor to change font color of entire text elements drawn on the canvas. 

 Chart.defaults.global.defaultFontColor='red';

4👍

I might be late to this question, but this answer may be useful for people who are looking for the answers.

In Chart.js, to style the scale label and ticks we can use the below settings.

options: {
    scales: {
        xAxes: [{
            display: true,
            scaleLabel: { // To format the scale label
                display: true,
                labelString: 'X axis name',
                fontColor: '#000000',
                fontSize: 10
            },
            ticks: {
                fontColor: "black", // To format the ticks, coming on the axis/labels which we are passing
                fontSize: 14
            }
        }],
        yAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                labelString: 'Y axis name',
                fontColor: '#000000',
                fontSize: 10
            },
            ticks: {
                fontColor: "black",
                fontSize: 14
            }
        }]
    }
}

Please refer to the Chart.js documentation for all the properties. Study all the properties before doing your implementation.

Happy coding!

3👍

React JS – Create React App

"chart.js": "^3.7.0",
"react-chartjs-2": "^4.0.0",

I struggled with this problem, unfortunately accepted answer did not work for me, but then I tweaked it little bit and made it work.

Here is what I ended up with, hope this will be helpful for someone…

enter image description here

const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            position: 'top',
            labels: {
                color: "#ffffff",
            }
        },
        title: {
            display: true,
            text: 'License Usage',
            color: "#ffffff"
        },
    },
    scales: {
        yAxes: {
            ticks: {
                color: "#ffffff"
            },
        },
        xAxes: {
            ticks: {
                color: "#ffffff"
            },
        }
    },
};

0👍

if we set the options as below then the font color of axes label values changes. For example I tried it on jsfiddle and it worked. The same also worked for my chart in rails app.
…

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
                fontColor:'red'
            }
        }]
    }
}

…

0👍

To change your chart object ticks and axes labels, do like so:

let changeItemColor = (item) => {
    item.scaleLabel.fontColor = color;
    item.ticks.fontColor = color;
    item.ticks.minor.fontColor = color;
    item.ticks.major.fontColor = color;
};
chart.options.scales.xAxes.forEach((item) => changeItemColor(item));
chart.options.scales.yAxes.forEach((item) => changeItemColor(item));
chart.update();

Leave a comment