amCharts XY Chart dateAxis displays wrong dates

Question

I'm trying out amCharts the XY Chart. For X I use DateAxis.

series.dataFields.dateX = "date";

All is great as long for the "date" I provide new Date():

"date": new Date(iso_date)

But now I want to use different timezone to be used for DateAxis. I managed to convert dates with luxon with toHTTP() from this:

"[native Date Wed Jul 15 2020 08:21:00 GMT+0930 (Australian Central Standard Time)]"

to something like this:

"Tue, 14 Jul 2020 04:01:13 GMT"

And finally my chart data was correct. But now the timeline spans in completely wrong period. It's somewhere in the future in 2021 and it spans for the whole year (I'm using single day data).

How can I fix it? Or is there a way to use ISO dates - on default it rejects it completely.

xorspark xorspark · Accepted Answer · 2020-07-15T23:30:26

Without seeing your data, your issue is very likely due to using new Date() on a string. If your date string does not strictly adhere to ISO 8601 or RFC 2822, then you're gambling on whether the browser will convert the date correctly (MDN docs) and since AmCharts will use the Date object as provided, it's very likely that the string did not exactly match one of the formats.

That said, if you're using string dates, just use AmCharts' DateFormatter object and set its inputDateFormat to the matching format, i.e. chart.dateFormatter.inputDateFormat = 'yyyy-MM-dd', so that it can parse your string dates correctly (or use a third party parser like Moment.js and pass in the converted dates). Also make sure your date axis' baseInterval is set correctly.

amCharts XY Chart dateAxis displays wrong dates

1 Answers