I have not been able to control the labels from scales/x/ticks/major or minor.
Here is a simple code to illustrate the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Major Ticks in Bold, Minor Ticks Normal</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2023-10-01', '2023-10-02', '2023-10-03', '2023-10-04', '2023-10-05'],
datasets: [{
label: 'Sample Data',
data: [10, 20, 15, 25, 18],
borderColor: 'blue',
borderWidth: 2,
fill: false,
}]
},
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'hour',
displayFormats: {
day: 'YYYY/MM/DD',
hour: 'HH:MM'
}
},
ticks: {
major: {
enabled: true,
font: {
weight: 'bold' // Major ticks in bold
}
},
minor: {
font: {
weight: 'normal' // Minor ticks in normal weight
}
}
}
},
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
I expect to have date in bold and hours with normal font. The documentation is not enough detailled on this feature.
Am I missing something ?