Limit numbers of labels on Chart.js in "smaller display only"

Question

Limit labels number on Chart.js line chart

I want to reduce the number of label of my line chart "Only" when displaying on the small device. From the post above, the solution is like this;

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 12
    }
}]

This is a good solution, but I want to keep all my 24 labels when showing on desktop (lg). I want to hide half of the labels when displaying on phone only (xs) .

This is how my chart on desktop and phone now.

Answer 1

Here is one solution where we check if the the window size is less than 600px and return 12 else the tick limit is 24

    xAxes: [{
            type: 'time',
            ticks: {
                autoSkip: true,
                maxTicksLimit: getTickLimit()
            }
    }]
        
    function getTickLimit(){
        return window.innerWidth<600? 12:24
    }