Change X and Y axis font color

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...

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"
            },
        }
    },
};

$(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';

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!