Chart.js axes label font size
Javascriptchart.jsJavascript Problem Overview
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
...
}]
}
}
Javascript Solutions
Solution 1 - Javascript
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 :
Solution 2 - Javascript
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.
Solution 3 - Javascript
Try this is working
options: {
scales: {
xAxes: [{
ticks: {
fontSize: 10
}
}]
}
}
Solution 4 - Javascript
Try to see if this will work
{
...
scales: {
xAxes: [{
fontSize: 40
...
}]
}
}
It doesn't look like scaleFontSize is a valid property.
Solution 5 - Javascript
options: {
locale: 'fa-IR',
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
plugins: {
legend: {
position: 'top',
labels: {
font: {
size: 9,
family:'vazir'
}
}
},
title: {
display: true,
text: chart_info.chartTitle,
font: {
size: 16,
family:'vazir'
}
},
tooltip: {
bodyFont: {
size: 13,
family:'vazir'
}
}
},
scales: {
x: {
ticks: {
font: {
size: 10,
family:'vazir'
}
}
},
y: {
ticks: {
font: {
size: 10,
family:'vazir'
}
}
}
}
}
Solution 6 - Javascript
Try this
Chart.defaults.global.defaultFontSize = 8;
Solution 7 - Javascript
Currently, I'm using ^2.9.4 chart.js. I've tried other solutions posted here and did some tweak.
options: {
scales: {
yAxes: [{
ticks: {
minor: {
fontSize: 16
}
}
}],
xAxes: [{
ticks: {
minor: {
fontSize: 16
}
}
}]
}
}
Solution 8 - Javascript
Try this simple solution:
myChart.options.scales.yAxes[0].ticks.fontSize = 40 ;
myChart.update();