3

I need to show 10 series of 400,000 points on a chart. When I show 1 series of 2-3 million point using Highcharts it works fine (takes 3000 ms to render which is great for that much data).

When I try to do multiple series with 400,000 points I manage to get to 4 series, when I add the 5th my browser freezes on 100 CPU (in chrome, the computer is at 50% CPU).

I am using boost.js for gpu rendering.

Is this a bug that with one series it can render millions of points but not with multiple series with the data divided?

I tried reducing the data, 5 series of 50,000 points doesn't work, 5 of 10,000 works fine, 7 of 10,000 works fine. It seems like there's a performance issue with using multiple data series

Do you know a workaround for this?

Heres my code - not doing anything special. snapshotData has 400,000 points, X axis data are decimal points (20.018489, 20.02048, ...) (if that matters for some reason)

snapshotData.forEach(atom => {
      data.push([atom.X, atom.Y]);
      data2.push([atom.X, atom.Y+ 20]);
      data3.push([atom.X, atom.Y+ 50]);
      data4.push([atom.X, atom.Y- 60]);
      data5.push([atom.X, atom.Y+ 140]);
    });

    Highcharts.stockChart('chartContainer', {
      chart: {
        zoomType: 'x'
      },
      boost: {
        useGPUTranslations: true
      },
      title: {
        text: 'Highcharts drawing ' + data.length + ' points'
      },
      subtitle: {
        text: 'Using the Boost module'
      },
      tooltip: {
        valueDecimals: 2
      },
      series: [{ data: data }, { data: data2 }, { data: data3 }, { data: data4 }, { data: data5 }]
    });

Update

Using the chart component instead of the stockChart made it work with 10 large series but with major processing time when zooming in/out (5-10 seconds of 100% cpu) which is more workable than the tab crashing like with stockChart although I need the stockChart :/

Royi Mindel
  • 1,258
  • 12
  • 35
  • 1
    Have you tried also boost.usePreallocated (see https://www.highcharts.com/docs/advanced-chart-features/boost-module)? Check also my example here: https://stackoverflow.com/questions/48798416/convert-scatterchart-into-linechart/48822096#48822096 – beaver Feb 26 '18 at 08:36
  • I successfully reproduced this problem on my machine. You can report it here as an performance issue: https://github.com/highcharts/highcharts/issues – Kamil Kulig Feb 26 '18 at 15:14

0 Answers0