Chart.js: Add time zone support

[benmccann]

We should add time zone option that let's the user specify which timezone they'd like to use.

Things this could affect:

• We could have one time zone for parsing data and one used for formatting labels and tooltips (e.g. timestamps are provided in UTC, but you'd like to display in Eastern timezone)
• Also used when we're calculating major ticks / auto-ticks and try to align to the start of a minute, day, hour, etc. But when the start of the day is depends on the time zone.
• In some cases we may be able to determine the timezone the user would like to use from the labels they've specified (e.g. +0000)
• Unit tests are currently flaky because they depend on the timezone they're being run in

Unfortunately JavaScript's time zone support is pretty bad natively. E.g. there's no way to create a Date object in a given timezone. Your only options are local system time or UTC time. We probably want to use only UTC dates or timestamps internally and convert to the proper time zone when needed for the cases listed above.

We would either need library support or would need to implement ourselves. In either case I think we should use Intl.DateTimeFormat APIs. We already get lots of complaints about the size of Moment.js (https://github.com/chartjs/Chart.js/issues/4303) and moment-timezone is even larger, so I think we should avoid using it.

[kmcgaire]

Is this being worked on?

[etimberg]

@kmcgaire not sure if @benmccann is looking at it or not

[benmccann]

Yes. I think we should switch from Moment to either Luxon or date-fns in order to fix this. We couldn't switch to Luxon until Chart.js 3.0 since Chart.js currently exposes Moment in it's interface. I have a pending PR to add timezone support to date-fns and have been waiting for it to be reviewed the past couple month, but the library authors are not very responsive.

[damianobarbati]

Please consider moving to Luxon.

Inspecting a simple ChartJS app reveals:

• chartjs taking up to 40KB (gzipped)
• momentjs taking up to 65KB (gzipped)

Huge. And that's mostly because of locale files.

$ yarn why moment
yarn why v1.6.0
=> Found "[email protected]"
info Reasons this module exists
   - "chart.js" depends on it
   - Hoisted from "chart.js#moment"

[pvfpvf]

Just to add, the global fix moment.tz.setDefault("UTC"); works for me. But if I use chartjs-plugin-zoom and zoom in, the X axis times immediately revert to local ones.

[benmccann]

This has been implemented by adding date adapters

[nemosupremo]

I took a look through the code, and it doesn't look like timezones are support with "vanilla" chartjs. The adapters.date configuration options isn't parsed by adapter.moment.js.

The solution seems to be to implement your own date adapter to provide this functionality however, according to #5960, the date adapter API is private, so a developer would need to track the date adapter source to code to ensure nothing breaks.

Am I missing something? Because otherwise I'm not sure this should be closed yet.

[benmccann]

You can use https://github.com/chartjs/chartjs-adapter-luxon which supports time zones