How to display UTC times properly in AmCharts 4

Question

I am trying to make a simple graph in AmCharts 4 where all times must be in UTC, but the graph and the times displayed in the DateAxis and in the cursor tooltip are all wrong, especially when there is the daylight saving hour change (for example on 28th of October 2018).

https://i.stack.imgur.com/yxddi.png

Note that my timezone is Brussels, so it may appear differently for you.

I have made a codepen to show the problems: https://codepen.io/Benjamin-Mampaey/pen/NoPLyd

var data = [
    {'date': '2018-10-28T00:00:00Z', 'value': 0},
    {'date': '2018-10-28T00:30:00Z', 'value': 0.5},
    {'date': '2018-10-28T01:00:00Z', 'value': 1},
    {'date': '2018-10-28T01:30:00Z', 'value': 1.5},
    {'date': '2018-10-28T02:00:00Z', 'value': 2},
    {'date': '2018-10-28T02:30:00Z', 'value': 2.5},
    {'date': '2018-10-28T03:00:00Z', 'value': 3},
    {'date': '2018-10-28T03:30:00Z', 'value': 3.5},
    {'date': '2018-10-28T04:00:00Z', 'value': 4},
    {'date': '2018-10-28T04:30:00Z', 'value': 4.5},
];

var config = {
    "type": "XYChart",
    "data": data,
    "xAxes": [{
        "type": "DateAxis",
        "tooltipDateFormat": "i",
        "dateFormats": {
            "minute": "HH:mm:ss Z",
            "hour": "HH:mm:ss Z",
        },
        "periodChangeDateFormats": {
            "minute": "i",
            "hour": "i",
        },
        "renderer": {
            "labels": {
                "rotation": 90,
                "verticalCenter": "middle",
                "horizontalCenter": "left"
            }
        },
    }],
    "yAxes": [{
        "type": "ValueAxis",
        "renderer": {
            "minGridDistance": 10
        },
    }],
    "series": [{
        "type": "LineSeries",
        "dataFields": {
            "dateX": "date",
            "valueY": "value"
        },
        "bullets":[{
            "type": "CircleBullet",
        }],
        "tooltipText": "{dateX.formatDate('i')}\n{dateX.formatDate('HH:mm:ss Z')}",
    }],
    "dateFormatter": {
        "inputDateFormat": "i",
    },
    "cursor": {
    },
};

var chart = am4core.createFromConfig(config, "chartdiv");

The problems that I see are:

The graph makes a strange zig zag at the daylight saving time. I would expect the graph to be a straight line.
The DateAxis labels formatted as "HH:mm:ss Z" are not in UTC
Idem for the series tooltipText

In AmCharts 3, it was only needed to set AmCharts.useUTC = true for this to work, but in AmCharts 4 I don't understand how to do the same thing. I tried setting "utc: true" on the dateFormatter, but it does not change anything.

Geoff Geoff · Accepted Answer · 2020-05-13T17:24:46

Documentation to do this on amcharts4 is here: https://www.amcharts.com/docs/v4/reference/dateformatter/#utc_property

There is a property called utc on dateformatter

How to display UTC times properly in AmCharts 4

2 Answers