I have the following mock up of a bar chart. Pretty simple except I can't seem to get the font size on the X axis to increase. I am guessing I am doing something wrong with the hAxis or just using the wrong option.
<script src="Chart.Bundle.min.js" type="text/javascript"></script>
...
<canvas id="myChart" height="220" ></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Break','Lunch','Meeting','Aux Out','Aux In'],
datasets: [{
data: [20, 20, 20, 20, 20],
backgroundColor: [
'rgba(66, 244, 98, 0.9)',
'rgba(101, 3, 96, 0.9)',
'rgba(198, 192, 194, 0.9)',
'rgba(43, 136, 234, 0.9)',
'rgba(232, 11, 55, 0.9)'
],
borderColor: [
'rgba(57,214,86,1)',
'rgba(81, 2, 77, 1)',
'rgba(145, 140, 141, 1)',
'rgba(37, 118, 203, 1)',
'rgba(173, 8, 41, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
legend : {
display: false,
},
hAxis: {
textStyle: {
fontSize: 32
}
}
}
});
</script>
</div>
first, you're using chart.js not google charts
for chart.js , the x-axis label font size options are as follows...
scales: {
xAxes: [{
ticks: {
fontSize: 40
}
}]
}
see following working snippet...
$(document).ready(function() { var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Break','Lunch','Meeting','Aux Out','Aux In'], datasets: [{ data: [20, 20, 20, 20, 20], backgroundColor: [ 'rgba(66, 244, 98, 0.9)', 'rgba(101, 3, 96, 0.9)', 'rgba(198, 192, 194, 0.9)', 'rgba(43, 136, 234, 0.9)', 'rgba(232, 11, 55, 0.9)' ], borderColor: [ 'rgba(57,214,86,1)', 'rgba(81, 2, 77, 1)', 'rgba(145, 140, 141, 1)', 'rgba(37, 118, 203, 1)', 'rgba(173, 8, 41, 1)' ], borderWidth: 2 }] }, options: { responsive: true, legend : { display: false, }, scales: { xAxes: [{ ticks: { fontSize: 18 } }] } } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="myChart"></canvas>
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.