Search code examples
javascripthighcharts

Highcharts tooltip shows tooltip date in milliseconds


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
  }
});

Solution

  • 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.