[Chartjs]-How do I incorporate Luxon timezone options with chart.js?

by

1đź‘Ť

âś…

The way that adapter seems to work is that it just passes the chart.js options object to the Luxon methods. So you’d want something like:

options: { 
   // other chart.js options here, and then...
   zone: "America/Denver"
}

But that won’t fix it on its own. The problem is that you haven’t told Luxon that your times are expressed in UTC, and the adapter doesn’t give you a way to separately specify the zone you want to parse in vs format in. The easy fix to that is to change your strings to ISO 8601 strings with “Z” on the end to tell anything parsing it that the strings are meant to be interpreted as UTC strings. Then Luxon will parse them in UTC and use the zone option to format them for Denver.

So, 2019-07-23 01:07:13 –> 2019-07-23T01:07:13Z

Here’s a fiddle: https://jsfiddle.net/9f0pu7ac/1/

1đź‘Ť

I spent a while trying to get this to work with more recent versions of Chart.js, and the solution turned out to be pretty simple – the zone option now needs to be specified under options.scales[scaleId].adapters.date, like so:

options: {
  scales: {
    xAxes: [{
      adapters: {
        date: {
          zone: 'America/Denver',
        },
      },
      type: 'time',
      distribution: 'series',
    }],
  },
}

Leave a comment