[Chartjs]-Chart.js: Chaing Font Color and Size not working

by

6👍

✅

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>

1👍

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

Leave a comment