High charts Issue with stock bar chart multiple line series

Question

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.

score 1 · Accepted Answer · answered Aug 30 '21 at 11:19

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

High charts Issue with stock bar chart multiple line series

1 Answers1