Search code examples
javascriptreactjsangularamchartsamcharts4

Amchart: plot chart for different timezone (ex. browser timezone = america/Toronto, chart target timezone = america/Chicago)

My browser timezone is america/toronto and the chart I want to plot is for America/chicago I tried two options, and both are not perfect solution

OPTION 1

by using intlJ library I can convert dateAxis label to target timezone

ex.

chart.dateFormatter.dateFormat = {
"year": "numeric",
"month": "numeric",
"day": "numeric",
"hour": "numeric",
"minute": "numeric",
"timeZone": "America/chicago "
};

with this solution date Axis showing correct date time for non-local timezone(target timezone) but if target timezone have an hour difference, I am getting

xAxis label 11:00 -----5:00------11:00

instead of

xAxis label 12:00 -----6:00------12:00

because Toronto 12AM = Chicago 11 AM and not look visibly good

check: https://stackblitz.com/edit/angular-ivy-gam8w7-nga-graph-hcrch9

OPTION 2

If I use offset setting

chart.dateFormatter.utc = false;
chart.dateFormatter.inputDateFormat = "i";
dateAxis.timezoneOffset = 360; (offset can not be static for all timezone)

I can correctly plot America/chicago chart. (only from NOV to FEB when UTC-6 offset=360), otherwise for MARCH to OCT, i have to change offset to 300. because of day light saving chagne the offset

what is the solution which can resolve both issues?

Solution

  • we have also the same issue and amchart is providing support for this in next release this was the response from amchart team:

    Good news we decided to implement timezone setting for DateAxis which should fix the issues you are having.

    We will release new version at some point next week.

    I will let you know when it is available.

    Thanks for hanging in.

    Yours sincerely,

    Martynas Majeris amCharts