CODEWITHSUNDEEP
javascriptchart.js
dingdingding
dingdingding

Reputation: 1581

Chart.js axes label font size

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

Upvotes: 74

Views: 177735

Answers (8)

lucifer_096
lucifer_096

Reputation: 1

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

Upvotes: 0

M-O-H-S-E-N
M-O-H-S-E-N

Reputation: 376

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

Upvotes: 11

rumman0786
rumman0786

Reputation: 1310

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.

Upvotes: 77

Usama Fayyaz
Usama Fayyaz

Reputation: 105

Try this

Chart.defaults.global.defaultFontSize = 8;

Upvotes: 1

Abdul Hameed
Abdul Hameed

Reputation: 1043

Try this simple solution:

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

myChart.update();

Upvotes: 0

tektiv
tektiv

Reputation: 14187

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 :

enter image description here

Upvotes: 143

NAVEEN KUMAR
NAVEEN KUMAR

Reputation: 81

Try this is working

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

Upvotes: 8

Richard Hamilton
Richard Hamilton

Reputation: 26434

Try to see if this will work

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

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

Upvotes: 4

Related Questions