Chart.js axes label font size

Question

In chart.js how can I set the set the font size for just the x axis labels without touching global config?

I've already tried setting the 'scaleFontSize' option my options object. I've also tried setting:

{
  ...
  scales: {
    xAxes: [{
      scaleFontSize: 40
      ...
    }]
   }
}

Answer 1

The fontSize attribute is actually in scales.xAxes.ticks and not in scales.xAxes as you thought.

So you just have to edit the attribute like this :

var options = {
    scales: {
        yAxes: [{
            ticks: {
                fontSize: 40
            }
        }]
    }
}

---

You can see a fully working example in this jsFiddle and here is its result :

Answer 2

Configuration options and properties for chartjs 3.0 has changed. Currently I'm using Chartjs 3.1.1. Fonts are used as objects now. In order to change font size of x axis ticks you have to use following configuration.

var options = {
    scales: {
        x: {
            ticks: {
                font: {
                    size: 12,
                }
            }
        }
    }
};

Checkout this jsfiddle sample.