Highcharts Angular date on x-axis is different

Question

We are developing a dashboard for one of our customer and the data that we are receiving for graphing is from one of the controller on site. We are using Highcharts Stock to visualize the data and using Cumulocity as a tool for the project in which we are using Angular for making this dashboard. While inserting the data (Time series Data) through Json API the date time is not rendering the correct value that we are using and it’s showing date of 2024.

import { Component, Input } from '@angular/core';

 

import * as Highcharts from "highcharts/highstock";
import { Options } from "highcharts/highstock";

 

// For demonstration purposes only.
import random from "highcharts-random";

 

import { HttpRequestService } from './highchart-widget.service';

 

@Component({
  template: `<highcharts-chart [Highcharts]="Highcharts" style="width: 750px; height: 400px; display: block;"
            [constructorType]="'stockChart'" [options]="chartOptions">`,
  styleUrls: ['./highchart-widget.component.css']
})
export class HighchartWidget {

 

  Highcharts: typeof Highcharts = Highcharts;

 

  constructor(public httpRequestService: HttpRequestService) {  }

 

  chartOptions: Options = {
    plotOptions: {
      series: {
        dataGrouping: {
          enabled: false,
          forced: false,
          units: [["day", [1]]]
        }
      }
    },
    scrollbar: {
      enabled: true
    },
    navigator: {
      enabled: true
    },
    yAxis: {
      min:-4,
      max:70,
      gridLineWidth: 1,
      title: {
        text: "SULFOX 2 plus - FF",
        //textAlign : 'center',
        style: { color: "purple", fontSize: "10px" }
      },

 

      plotLines: [
        {
          value: 50,
          color: "red",
          dashStyle: 'Dash',
          width: 2,
          label: {
            text: "HH"
          }
        },
        {
          value: 25,
          color: "yellow",
          dashStyle: 'Dash',
          width: 1.5,
          label: {
            text: "H"
          }
        },
        {
          value: -1,
          color: "yellow",
          dashStyle: 'Dash',
          width: 1.5,
          label: {
            text: "L"
          }
        },
        {
          value: -2,
          color: "red",
          dashStyle: 'Dash',
          width: 1.5,
          label: {
            text: "LL"
          }
        }
      ]
    },

 

    series: [
      {
        type: "line",
        pointInterval: 3600 * 1000,
        data: this.ffChartData,
        pointStart: Date.UTC(2021, 4, 4)
      }
    ]
  };

 

}
 

Answer 1

You need to convert your data to the format required by Highcharts: [x, y] where x is a timestamp in milliseconds.

const ffChartData = {
    "2021-02-07T02:02:00.000Z": [{
        "min": 2256.11,
        "max": 2256.11
    }],
    "2021-02-07T06:17:00.000Z": [{
        "min": 2288.07,
        "max": 2288.07
    }],
    "2021-02-07T10:32:00.000Z": [{
        "min": 2300.65,
        "max": 2300.65
    }]
}

const processedData = [];

for (const date in ffChartData) {
    processedData.push([new Date(date).getTime(), ffChartData[date].max]);
}

Highcharts.stockChart('container', {
    ...
    series: [{
        data: processedData,
        ...
    }]
});

---

Live demo: http://jsfiddle.net/BlackLabel/qew0t184/

API Reference: https://api.highcharts.com/highstock/series.line.data