CODEWITHSUNDEEP
javascriptamcharts
Benjamin Mampaey
Benjamin Mampaey

Reputation: 11

How to display UTC times properly in AmCharts 4

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.sstatic.net/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:

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.

Upvotes: 1

Views: 1408

Answers (2)

Geoff
Geoff

Reputation: 51

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

Upvotes: 1

Benjamin Mampaey
Benjamin Mampaey

Reputation: 11

I have posted the questions on the github, and they are looking into it.

https://github.com/amcharts/amcharts4/issues/908

https://github.com/amcharts/amcharts4/issues/903

Upvotes: 0

Related Questions