Plotly.js setting timezone for type:"date"

Question

I'm working on a graph to display a status over time. All the data is in unix formatting. I display the data in my title using javascript (new Date(data)).toUTCString. This is the same data used for the graph but the graph is running 1 hour early. Image

Here is my layout config:

layout = {
    "showlegend": true,
    "title": new Date(min).toUTCString() + " to " + new Date(max).toUTCString(),
    "xaxis": {
        "autorange": true,
        "range": [
            min,
            max
        ],
        "title": "Time",
        "type": "date"    //if I change this to scatter, I get the unix values
    }

}
 Plotly.newPlot('graphMain', temp, layout); //temp contains the arrays

I'm currently residing in Austria (UTC+01:00). Anyone have an idea for this?

score 2 · Accepted Answer · answered Mar 19 '16 at 07:42

2

Plotly doesn't currently support timezones.

You might want to use something like moment.js timezone if you need to precompute datetime to a local timezone or to UTC. Or you can do it manually if you like.

answered Mar 19 '16 at 07:42

Marko Bonaci

5,622
2
34
55

chococroqueta · Answer 2 · 2022-12-21T10:29:38.833

Today, I think Plotly.js still doesn't support timezones, or at least I couldn't find it. This is how I solved it, but, please, if you have a better solution I'd be glad to hear about!

I suppose the original format of the dates is yyyy-mm-ddTHH:MM:SSZ, then you change the format using the function in https://stackoverflow.com/a/74341794/11692632, which gets the timezone of the pc.

function fmt(date, format = 'YYYY-MM-DD hh:mm:ss') {
  const pad2 = (n) => n.toString().padStart(2, '0');

  //These functions get the date from the browser timezone, in my case 'Europe/Madrid'
  const map = {
    YYYY: date.getFullYear(),
    MM: pad2(date.getMonth() + 1),
    DD: pad2(date.getDate()),
    hh: pad2(date.getHours()),
    mm: pad2(date.getMinutes()),
    ss: pad2(date.getSeconds()),
  };

  return Object.entries(map).reduce((prev, entry) => prev.replace(...entry), format);
}

> date = '2022-12-15T10:00:00Z'
'2022-12-15T10:00:00Z'
> newDate = new Date(date)
2022-12-15T10:00:00.000Z
> fmt(new Date(date))
'2022-12-15 11:00:00'

NOTE, of course, if you are using unix time, it would also work

> date = 1671100918000
1671100918000
> newDate = new Date(date)
2022-12-15T10:41:58.000Z
> newDate.toLocaleString('se-SE', { timeZone: 'Europe/Madrid' })
'2022-12-15 11:41:58'

So, if my array of dates is dates, to translate the dates to my timezone you should do:

> const tz_dates=dates.map(date=>fmt(new Date(date)))

Plotly.js setting timezone for type:"date"

2 Answers2

Linked