Chart stock with large data

[shishima123]

Hello, is there a way to reduce lag and increase performance for stock charts when handling large data?

My chart can accommodate up to 15,000 candles, and it can display up to 3,000 candles on the screen at a time.

Since I need to display additional information, I can't group the data.

Are there any options to limit events? Or any way to enhance performance?

Demo Fiddle

[martynasma]

It doesn't look like you have data item grouping enabled. I strongly advise to do so.

https://www.amcharts.com/docs/v5/charts/xy-chart/axes/date-axis/#dynamic-data-item-grouping

It'll not only solve the performance issue, but also increase UX (try making a sense of 3000 candles crammed into 1000px chart).

[shishima123]

I understand the magic of the "data item grouping" feature; however, since our data includes lines on the screen, enabling the "data item grouping" feature will cause these lines to no longer display accurately.

Do you have any other ideas?

[martynasma]

You can disable data item grouping for each series selectively. Try enabling grouping generally, but disabling it for the line series.

https://www.amcharts.com/docs/v5/charts/xy-chart/axes/date-axis/#selectively-disabling-grouping

[shishima123]

i tried it in my source code, but it doesn't seem to work

It shows error if i config like this

dateAxis = mainPanel.xAxes.push(
am5xy.GaplessDateAxis.new(root, {
  extraMax: 0.1, // adds some space for main series
  renderer: am5xy.AxisRendererX.new(root, {
    minorGridEnabled: false,
    pan: 'zoom'
  }),
  tooltip: am5.Tooltip.new(root, {}),
  maxDeviation: 0.5,
  minZoomCount: 3,
  maxZoomCount: 3000,
  groupData: true
  // groupInterval: { timeUnit: 'minute', count: 10 }
})

  heatmapSeries = mainPanel.series.push(
    am5xy.LineSeries.new(root, {
      valueXField: 'timestamp',
      valueYField: 'price',
      xAxis: dateAxis,
      yAxis: valueAxis,
      groupDataDisabled: true
    })
  )

    valueSeries = mainPanel.series.push(
    am5xy.CandlestickSeries.new(root, {
      name: 'BTC/USDT',
      clustered: false,
      valueXField: 'timestamp',
      valueYField: 'close',
      highValueYField: 'high',
      lowValueYField: 'low',
      openValueYField: 'open',
      calculateAggregates: false,
      xAxis: dateAxis,
      yAxis: valueAxis
      // groupDataDisabled: true
    })
  )

    volumeSeries = mainPanel.series.push(
    am5xy.ColumnSeries.new(root, {
      name: 'Volume',
      clustered: false,
      valueXField: 'timestamp',
      valueYField: 'volume',
      xAxis: dateAxis,
      yAxis: volumeValueAxis
      // groupDataDisabled: true
    })
  )

[martynasma]

Would you be able to update your jsFiddle as per above?