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

The title should be changed, since the question and the answers focus on the axis tick labels and not the actual axis label, which is confusing if you are looking to change the axis label font size. — Little geek, Jun 14 '19 at 07:58

tektiv · Accepted Answer · 2017-12-11T20:30:54.030

141

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 :

edited Dec 11 '17 at 20:30

answered Jul 11 '16 at 10:56

tektiv

14,010
5
61
70

1

Yes, but how to set fontSize for radar chart where no `x` and `y` axes ? – Yevhenii Shashkov Mar 02 '17 at 11:25
You referenced the xAxes ticks in your explanation, but set the yAxes ticks to 40 in the jsFiddle. – c.j.mcdonn Aug 31 '17 at 14:23
How could I set the title's and lable's font size ? – Luciana Oliveira Apr 07 '21 at 21:30
This is working in fiddle but not in my code. – Muhammad Ahsan Apr 20 '22 at 17:53

score 65 · Answer 2 · answered Apr 21 '21 at 11:35

65

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.

answered Apr 21 '21 at 11:35

rumman0786

1,150
10
20

2

Finally! I've searched everywhere and most of the other answers are outdated! – ThePhi Jun 08 '21 at 12:54
1

Here is the doc link: https://www.chartjs.org/docs/master/general/fonts.html – Relisora Oct 01 '21 at 17:41
1

It still works also for chart.js v4.3.0 :) – Jay Lim Jul 16 '23 at 09:11

score 9 · Answer 3 · answered Oct 01 '21 at 08:02

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

Does not work for Radial type – e-info128 Feb 18 '22 at 05:51 — e-info128, Feb 18 '22 at 05:51

score 8 · Answer 4 · answered Jun 09 '17 at 12:31

8

Try this is working

     options: {
        scales: {
           xAxes: [{
                   ticks: {
                    fontSize: 10
                   }
                  }]
                }
             }

answered Jun 09 '17 at 12:31

NAVEEN KUMAR

81
1
2

score 4 · Answer 5 · answered Jul 08 '16 at 17:41

4

Try to see if this will work

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

It doesn't look like scaleFontSize is a valid property.

answered Jul 08 '16 at 17:41

Richard Hamilton

25,478
10
60
87

Surprisingly is works for the `scaleLabel` which is poorly documented. – davidkonrad Nov 28 '16 at 03:54

score 1 · Answer 6 · answered Jun 16 '20 at 20:02

1

Try this

Chart.defaults.global.defaultFontSize = 8;

answered Jun 16 '20 at 20:02

Usama Fayyaz

95
2
12

This would be a better answer if you explained how the code you provided answers the question. – pppery Jun 17 '20 at 00:54
1

As of April 2023, this does not work. However the following text works for the global configuration: `Chart.defaults.font.size = 16;` Source: https://www.chartjs.org/docs/latest/general/fonts.html – Mr-IDE Apr 27 '23 at 15:41

score 0 · Answer 7 · answered Jun 26 '18 at 09:06

0

Try this simple solution:

myChart.options.scales.yAxes[0].ticks.fontSize = 40 ;

myChart.update();

answered Jun 26 '18 at 09:06

Abdul Hameed

1,025
13
17

lucifer_096 · Answer 8 · 2021-12-20T12:23:24.770

0

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

edited Dec 20 '21 at 12:23

answered Dec 20 '21 at 08:53

lucifer_096

1
2

Chart.js axes label font size

8 Answers8

Linked