Change the font color of X and Y

Question

How can I change the color of the X and Y axis labels? I tried to use fontColorin scaleLabelbut could I do it in the wrong place?

I tried to apply it in scaleas can be found in the source code . I also tried under scalesand even in xAxes.

var options = {
type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'red',
            borderWidth: 1
        }]
    },
    options: {
        scale: {
            scaleLabel:{
                fontColor: 'red'
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
 };

Online play

I checked the documentation, but it is not very clear to me. And since chart.js does not provide enough examples, it is sometimes not easy to find something ...

Answer 1

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

Run codeHide result

fontColor ticks/label/legend: labels ,

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'
                },
            }]
        } 

    }

defaultFontColor, , .

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

Answer 2

, , . , jsfiddle, . rails....

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

...

Answer 3

, , , .

Charjs.JS .

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

, . .

!

Answer 4

To change the labels of chart objects and axis labels:

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();