highcharts / highcharts-react-native

Other
103 stars 81 forks source link

Boost Module Usage #123

Closed omertimucin closed 3 years ago

omertimucin commented 3 years ago

I used the basic example, changed it a little and tried to add boost module but it doesn't seem to work. Even 25000 data points take too long to render. Here is my App.js:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import HighchartsReactNative from '@highcharts/highcharts-react-native'

const modules = ['boost', 'boost-canvas','highcharts-more']

export default class App extends React.Component {
    constructor(props) {
        super(props);

        let chartSeries = []

        for(let i = 0; i < 4 ; i ++){
          let series = {data:[]};

          for(let i= 0; i < 2500; i++){
            let point = [i+1,Math.floor(220-Math.random(0,120)*10)]
            series.data.push(point)
          }

          chartSeries.push(series);
        } 

        this.state = {
            chartOptions: {
              boost:{
                enabled:true,
                seriesThreshold:2000
              },
              chart:{
                zoomType:'xy'
              },
              series: chartSeries
            }
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <HighchartsReactNative
                    styles={styles.container}
                    options={this.state.chartOptions}
                    modules={modules}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        justifyContent: 'center',
        flex: 1
    }
});

Is my usage wrong?