Search code examples
highchartshighcharts-ngangular2-highcharts

High charts Issue with stock bar chart multiple line series

It's working fine when all data available but issue happens when we select range in bar at bottom in angular 11

I don't know why this issue generated?

Code in angular:-

var datas = [{
  data: [
    [1630175400000, 0],
    [1630089000000, 0.47],
    [1630002600000, -0.48],
    [1629916200000, 0.38],
    [1629829800000, 0.18],
    [1629743400000, 0.91],
    [1629657000000, 0.01],
    [1629570600000, -0.2],
    [1629484200000, 0.01],
    [1629397800000, -0.66],
    [1629311400000, 0.04],
    [1629225000000, -0.63],
    [1629138600000, 0.07],
    [1629052200000, -0.02],
    [1628965800000, 0],
    [1628879400000, 0.24],
    [1628793000000, -0.45],
    [1628706600000, 0.21],
    [1628620200000, -0.04],
    [1628533800000, -0.34],
    [1628447400000, -0.08],
    [1628361000000, 0.03],
    [1628274600000, -0.23],
    [1628188200000, 0.29],
    [1628101800000, -0.19],
    [1628015400000, 0.2],
    [1627929000000, -0.13],
    [1627842600000, -0.06],
    [1627756200000, 0.02],
    [1627669800000, -0.36]
  ],
  id: "base1",
  name: "Avg. growth rate",
  type: "line"
}, {
  data: [
    [1628533800000, 117.442863],
    [1630175400000, 117.476804],
    [1630089000000, 117.476804],
    [1630002600000, 116.930384],
    [1629916200000, 117.488726],
    [1629829800000, 117.039701],
    [1629743400000, 116.834498],
    [1629657000000, 115.777653],
    [1629570600000, 115.764878],
    [1629484200000, 115.996878],
    [1629397800000, 115.988679],
    [1629311400000, 116.764601],
    [1629225000000, 116.7125],
    [1629138600000, 117.458283],
    [1629052200000, 117.377938],
    [1628965800000, 117.395677],
    [1628879400000, 117.395677],
    [1628793000000, 117.116852],
    [1628706600000, 117.64148],
    [1628620200000, 117.392843],
    [1628533800000, 117.442863],
    [1628447400000, 117.841829],
    [1628361000000, 117.933245],
    [1628274600000, 117.902974],
    [1628188200000, 118.170114],
    [1628101800000, 117.826993],
    [1628015400000, 118.045463],
    [1627929000000, 117.811225],
    [1627842600000, 117.968985],
    [1627756200000, 118.045426],
    [1627669800000, 118.024255]
  ],
  id: "base2"
  name: "IN (GBP)"
  type: "line"
}]

Thanks in advance.

enter image description here

enter image description here

Solution

  • Live example with the issue: http://jsfiddle.net/BlackLabel/zwsLxyac/

    You have unsorted data which causes Highcharts error #15: https://assets.highcharts.com/errors/15/

    You need to sort your data before it is passed to a chart:

    datas.forEach((series, index) => {
    series.data.sort((a, b) => a[0] - b[0]);
});

    Live demo: http://jsfiddle.net/BlackLabel/0nuezd8b/

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