Show marker based on condition with huge data-CodePudding

I'm trying to plot a highstock chart with marker based on conditions, with huge number of data. You can assume it to 20k-50k. By following these two jsfiddle one and two

I've chosen a way to plot my chart, let me show you few line of code

  let mockValue = [
      {
        x: 1671948197800,
        y: 1.102,
        marker: {
          enabled: true
        }
      },
      [1671948197821, 1.103],
      {
        x: 1671948198839,
        y: 1.104,
        marker: {
          enabled: true
        }
      },
      [1671948206861, 2.106],
      {
        x: 1671948199800,
        y: 1.105,
        marker: {
          enabled: true
        }
      },
      {
        x: 1671948200823,
        y: 1.106,
        marker: {
          enabled: true
        }
      },
      {
        x: 1671948201831,
        y: 1.107,
        marker: {
          enabled: true
        }
      },
      [1671948203822, 1.105],
      [1671948204836, 1.106],
      [1671948205861, 1.106]
    ]

   this.options.series[0].data = mockValue;
   this.chart = new StockChart(this.startStopLevelOption);

It's a mock data which I'm passing it to options and that option I'm passing to highstock. I'm taking data from my db which I can't show you here but I'm presenting my data like in this format. When my condition satisfy I'm creating a JSON Object with marker and color and where it's not satisfying I'm just passing array with time in 0 index and value in 1st index.

And it's working fine with this mock data, but when I do the same with huge data that time it's not plotting chart and even I'm not getting any error.

Could you please tell me the reason or way to solve this. I just need to plot a chart with conditional markers.

Thanks in advance

CodePudding user response：

For performance reasons Highhcharts introduced turboThreshold. In API we can read:

turboThreshold: number Since 2.2.0

When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable.

Note: In boost mode turbo threshold is forced. Only array of numbers or two dimensional arrays are allowed. Defaults to 1000.

So to disable it set:

  series: [{
    turboThreshold: 0,
    ...
  }]

Please also check the dataGrouping Highstock feature which can also affect the result of enabling markers for single points.

Live example: http://jsfiddle.net/BlackLabel/gmLbo7st/

Docs: https://www.highcharts.com/docs/stock/data-grouping

API Reference:

https://api.highcharts.com/highstock/series.line.turboThreshold

https://api.highcharts.com/highstock/series.line.dataGrouping