[SOLVED] Javascript don't display the correct time when calling the API in highcharts

Javascript don't display the correct time when calling the API in highcharts

i use an API to retrieve weather data from Brightsky. The data itself is displayed correctly. Only the time always starts at January 1st 00:00:00:000. How can I get the time displayed correctly?

example: jsfiddle

I have already tried to adapt the code with

const categories = weatherData.map(entry => new Date(entry.timestamp + 'Z').getTime()); without success

Solution

You can (and most likely should) stick to datetime xAxis type, just add proper timestamp data to your series data like so:

const weatherData = data.weather;
    
const temperatureData = weatherData.map(entry => ({
  x: new Date(entry.timestamp).getTime(),
  y: entry.temperature
}));
    
const pressureData = weatherData.map(entry => ({
  x: new Date(entry.timestamp).getTime(),
  y: entry.pressure_msl
}));

You can further adjust the xAxis labels display based on the API: https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats

Here is your demo working well: https://jsfiddle.net/BlackLabel/c62uy7gz/

Kind regards,