Search code examples
javascriptchart.jsdate-fns

How to format x-axis time scale values in Chart.js v4.2.1


I am not able to format the display format of Time. I am using chart.js v4.2.1 and date-fns v3.0.0(this as script from cdnjs). I am able to get the unit but the display format I want is Day of a week day.Month (e.g: Mo 12.04, Tue 13.04, etc...)

Here is the code:

scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'day',
                    displayFormats: {
                        day: 'need to be done'
                    }
                }
            }

Solution

  • Going thru the date-fns documentation (v2), the format string to use to have those date string representation is the following:

    EEE dd.MM
    

    HEre is the link to date-fns doc, about formatting: https://date-fns.org/v2.29.3/docs/format

    About zooming, if you are using chartjs-plugin-zoom, it doesn't change the scale configuration and in your case the time unit. But I think you can use the onComplete (or onProgress) hooks of the plugin to change the scale config at runtime, using your logic to change the time unit.