[Chartjs]-ChartJS xAxis time formats don't change for days

by

4👍

✅

It is possible to coerce the units you want the xAxis to use using the unit property. For example, if you wanted it to show it in terms of days instead of hours you can use a config like:

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                time: {
                    unit: 'day',
                    displayFormats: {
                        day: 'MMM DD' 
                    }
                }
            }]
        }
    }
});

An alternative would be to use minUnit instead of unit. This will ensure your graph scales up better as it will limit the lowest display format to use while still being flexible to use larger formats if needed.

With regard to your overlapping labels problem, tweaking the unitStepSize property might help.

More information in the Time Units Section of ChartJS docs

Leave a comment