javascript

Increase font size of axis labels Chart.js

Did you know that by default the font size of axis labels on Chart.js is quite small? While this is not necessarily bad, we can make it look better.

// If you are using version 3
options: {
    scales: {
        x: {
            ticks: {
                font: {
                    size: 20 //this change the font size
                }
            }
        }
    }
}

You can use the above code snippet if you are using Chart.js version 3 or above. This will increase the font size of label text shown on the axis of charts created by Chart.js.

The code will change the labels font size of the x-axis of Chart.js. We are assigning a font object to ticks object of x-axis and assigning a size key to it. The value of the size key can be assigned in pixels. In our code example, we have assigned 20px font size to labels.

To change the font size of y-axis labels, use the below code.

//Chart js version 3 or above
options: {
    scales: {
        y: {
            ticks: {
                font: {
                    size: 20 //this change the font size
                }
            }
        }
    }
}

Check the live demo to increase or decrease the font size of x or y-axis labels

Change the font weight of axis labels

options: {
        scales: {
            x: {
            	ticks: {
              	font: {
                  weight: 'bold'
                }
              }
            }
        }
    }

To change the font-weight of x or y-axis labels, you can use the above code. Here, we are making x-axis labels text bold.

Was this helpful?