How to Set the Font Size for Just the X Axis Labels Without Touching Global Config ?
In this article, we will explore how to set the font size for just the x-axis labels without modifying the global configuration. The font size for the x-axis can be defined inside the options object while initializing the chart.
Chart.js CDN link
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Syntax:
options: {
scales: {
x: {
ticks: {
font: {
size: 14, // set the font size for x-axis labels
}
}
},
}
}
Example: The below example will illustrate the how you can define a particular font size for the x-axis.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title > Chart.js Example </ title > < script src = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > </ head > < body > < center > < h2 >w3wiki</ h2 > < canvas id = "myChart" width = "400" height = "200" > </ canvas > </ center > < script > const ctx = document. getElementById('myChart'). getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'], datasets: [{ label: 'My Dataset', data: [10, 20, 30, 40, 50], backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }] }, options: { scales: { x: { ticks: { font: { // set the font size // for x-axis labels size: 12, } } }, y: { ticks: { beginAtZero: true } } } } }); </ script > </ body > </ html > |
Output:
Contact Us