How to change the font size of yAxis ticks in chartJs?
Question
There is an old post with a solution that does not work. I tried
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
yAxes: [{
ticks: {
fontSize: 40,
size: 40
}
}]
}
}
but it does not change the font size of the y axis labels of my chart. My chart is a simple chart with just one X axis and one Y axis.
2 answers
solution1
0 2021-07-05 21:30:36
The way scales options and font options are defined have been changed in chart.js v3 along with some other breaking changes, please read the migration guide: https://www.chartjs.org/docs/master/getting-started/v3-migration.html
To change the font size of the ticks you have to define a font opbject in the ticks with a different way of defining the scale.
Live example:
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { ticks: { font: { size: 20 } } }, x: { ticks: { font: { size: 20 } } } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script> </body>
solution2
-1 2021-07-05 20:13:41
You can use like this
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontSize: 40
}
}]
}
Here is the code which can help you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<div class="container
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<canvas id="myChart"></canvas>
</div>
<div class="col-md-1"></div>
</div>
</div>
<script type="text/javascript">
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext('2d');
Chart.defaults.global.defaultFontColor = 'dodgerblue';
Chart.defaults.global.defaultFontSize = 16;
var data = {
labels: ["Vanilla", "Chocolate", "Strawberry"],
datasets: [
{
label: "Ice Cream Sales ",
fill: true,
backgroundColor: [
'moccasin',
'saddlebrown',
'lightpink'],
data: [11, 9, 4]
}
]
};
var options = {
title: {
display: true,
text: 'Ice Cream Truck Report',
position: 'bottom'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontSize: 40
}
}]
}
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.