Highcharts tooltip shows tooltip date in milliseconds

Question

In this jsFiddle I have a time series Highcharts. The dates are correct in the X axis, but the tooltip shows a UTC number instead of the date. What is wrong with this chart?

Highcharts.chart('container', {
  "chart": {
    "type": "spline",
  },
  "xAxis": {
    "title": {
      "text": "aaa",

    },
    "labels": {
      "style": {
        "fontSize": "8px"
      },
      "format": "{value:%d-%m-%Y}"
    }

  },
  "yAxis": [
    {
      "title": {
        "text": "Millions USD"
      },
      "labels": {
        "format": "{value:,0f}"
      },
      "maxPadding": 0
    }
  ],
  "series": [
    {
      "name": "the_date",
      "data": [
        [
          1262390400000,
          10
        ],
        [
          1270339200000,
          25
        ],
        [
          1283385600000,
          15
        ],
        [
          1288483200000,
          20
        ]
      ]
    }
  ],
  "tooltip": {
    "backgroundColor": "rgba(246, 238, 204, 1)",
    "borderColor": "rgba(58, 80, 225, 1)",
    "borderWidth": 1,
    "shadow": true,
    "valueDecimals": 0
  }
});

Bibipkins Bibipkins · Accepted Answer · 2020-09-13T12:38:45

Highcharts have no idea that it is a date, you must specify it for your axis. Try my fiddle.
I changed your fiddle according to the Highcharts docs.
I added type for your axis "type": 'datetime'

"xAxis": {
  "type": 'datetime',
  "title": {
    "text": "aaa",
  },
}

and formatting for the tooltip "xDateFormat": "%Y-%m-%d".

"tooltip": {
  "backgroundColor": "rgba(246, 238, 204, 1)",
  "borderColor": "rgba(58, 80, 225, 1)",
  "borderWidth": 1,
  "shadow": true,
  "valueDecimals": 0,
  "xDateFormat": "%Y-%m-%d"
}

And here is a link to fiddle provided by Highcharts.

Highcharts tooltip shows tooltip date in milliseconds

1 Answers