Struggling with adjusting the font size of x-axis labels in my line chart design using ChartJS. I've attempted to set the x-axis ticks to my desired size, but the font size remains unchanged:
options:{
scales:{
xAxis: [{
ticks:{
fontSize: 6,
}
}]
}
}
The code for my chart successfully adjusts the font size of the yAxis labels, but the same technique doesn't work for the xAxis:
var myChart= new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: ['Monday','Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
data: [1200,1500,1600,1800,1400,600,1330],
borderColor:"rgba(0,150,255, 1)",
borderWidth: 3,
lineTension: 0,
pointBackgroundColor: "white",
pointBorderColor: "rgba(0,150,255, 1)",
pointBorderWidth: 3,
pointRadius: 4,
fill: false
}
],
},
options: {
responsive: true,
maintainAspectRatio: true,
tooltips:{enabled:false},
legend:{
display:false
},
scales:{
yAxes:[{
ticks:{
max:2000,
min:0,
fontColor: 'black',
fontSize: 8,
}
}],
xAxis:[{
ticks:{
fontColor:'black',
fontSize: 6,
}
}]
},
title: {
display: true,
fontSize: 15,
fontColor: "black",
text: 'Calories'
},
annotation:{
events:["click"],
annotations:[
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Monday",
xMax: "Sunday",
yMin: 1200,
yMax: 1500,
backgroundColor: "rgba(0,255,0,0.5)",
borderColor: "rgb(0, 255, 0)",
borderWidth: 1,
onClick: function(e) {
console.log("Box", e.type, this);
}
}
]
}
}
});
Any advice on how to solve this issue would be appreciated.