How to control the ticks labels major or minor?

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 ?

Solution

Yes, there is the option options.scales.x.ticks.font (docs), (not options.scales.x.major.font). That option is scriptable, which means that it may be set to a function that receives as actual argument a context object that contains information about the actual tick label, and it should return actual font properties, which can be this way changed from label to label depending on the properties of that label.

The relevant property needed to identify a major tick label is described in the documentation: "major will be defined on ticks in the scriptable options context". Thus, the font property can be set to:

font: function(context){
    if(context.tick && context.tick.major){
        return {
            weight: 'bold',
        };
    }
}

which is taken from the chart.js site samples.

Your code with this change, in a snippet:

new Chart('myChart', {
    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: function(context){
                        if(context.tick && context.tick.major){
                            return {
                                weight: 'bold',
                            };
                        }
                    }
                }
            },
            y: {
                beginAtZero: true
            }
        }
    }
});

 <canvas id="myChart"></canvas>
<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>