highcharts_boost_webgl_scatter_plot_million_points_typescript.ts

1import * as Highcharts from 'highcharts';
2import Boost from 'highcharts/modules/boost';
3
4// Initialize the boost module
5Boost(Highcharts);
6
7// Generate 1 million random points for the demonstration
8const data: number[][] = [];
9for (let i = 0; i < 1000000; i++) {
10    data.push([
11        Math.random() * 100,
12        Math.random() * 100
13    ]);
14}
15
16const options: Highcharts.Options = {
17    chart: {
18        zoomType: 'xy'
19    },
20    boost: {
21        useGPUTranslations: true,
22        usePreAllocatedFloatArray: true
23    },
24    title: {
25        text: 'Highcharts Boost Quickstart'
26    },
27    subtitle: {
28        text: 'Rendering 1,000,000 points'
29    },
30    series: [{
31        type: 'scatter',
32        data: data,
33        marker: {
34            radius: 0.5
35        }
36    }]
37};
38
39Highcharts.chart('container', options);