Chart.js: Chaing Font Color and Size not working

Question

I want to change the font size and color of the labes on the Y- and X-Axis. The documentation says that you simply have to set the scaleFontColor and scaleFontSize:

    var config = {
        scaleFontColor: "#6E6E6E",
        scaleFontSize: 16,
        type: "line",
        data: {
            labels: labelsFromEntries(entriesAll),
            datasets: []
        },

        options: {
            responsive: true,
            title: {
                display: false
            },
            legend: {
                position: "bottom"
            },
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        unit: "hour",
                        format: "HH:mm",
                        tooltipFormat: "HH:mm",
                        displayFormats: {
                            hour: "HH:mm",
                            day: "HH:mm",
                            week: "HH:mm",
                            month: "HH:mm",
                            quarter: "HH:mm",
                            year: "HH:mm"
                        }
                    },
                    gridLines : {
                        display : false
                    }
                }, ],
                yAxes: [{}]
            },
        }

This has no effect at all with Version: 2.1.3!

So how can you really change the font color and size of Y- and X-Axis labels?

Answer 1

You misunderstood how Chart.js is working (which I can understand since it is a real mess to edit it).

What you want to edit is the tick labels of your axes, and not their title.
Then, you must know that the fontSize and fontColor attributes you are looking for are stored in scales.xAxes.ticks.

So you just have to edit them like this :

var options = {
    // ...
    scales: {
        xAxes: [{
            ticks: {
                fontSize: 30,
                fontColor: "red"
            }
        }]
    }
    // ...
}

And then add this var to your chart options.

---

Here is a fully working example of you what you want :

var ctx = document.getElementById("myChart");
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: {
        scales: {
            yAxes: [{
                ticks: {
                    // Edit here for the yAxe
                    beginAtZero:true,
                    fontColor: "red",
                    fontSize: 30
                }
            }],
            xAxes: [{
                ticks: {
                    // Edit here for the xAxe
                    fontColor: "#456ef4",
                    fontSize: 20
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
  
<canvas id="myChart" width="400" height="400"></canvas>

Answer 2

You should have a look at the latest doc: http://www.chartjs.org/docs/.

The font size can be set by changing scaleLabel object

        scales: {
            xAxes: [{
                type: "time",
                gridLines : {
                    display : false
                },
                scaleLabel : { fontColor: '#6E6E6E', fontSize:16 }
            }],
        },