[Chartjs]-Format chart.js x-axis labels to specific timezone

by

1👍

With Chart.js 3.x and luxon you can pass the timezone as an option to chartjs-adapter-luxon, e.g:

options: {
    scales: {
        x: {
            type: 'time',
            time: {
                unit: 'second',
                displayFormats: {
                    second: 'MMM d, yyyy, h:mm:ss a'
                }
            },
            adapters: {
                date: {
                    zone: 'UTC+6'
                }
            },
            ticks: {
                source: 'data'
            }
        }
    }
}

source:

https://github.com/chartjs/chartjs-adapter-luxon/blob/v1.1.0/README.md#configuration

https://github.com/chartjs/chartjs-adapter-luxon/blob/v1.1.0/test/specs/luxon-adapter.spec.js#L25-L29

0👍

Most other suggestions on this topic point towards using a parser like your example. For whatever reason I was not able to get this to work for me. Like you described, I never saw any visual change to my chart based on what I put in my parser.

I WAS able to get the following to work using Chart.js 2.7.0. Note that this same solution does not work using later versions of Chart.js (I tried versions 2.7.2 and 2.9.4 to no avail).

This will display the x axis labels in the specified format.

xAxes: [{
    type: 'time',
    time: {
      timezone: 'America/Boise'}}]

Leave a comment