highcharts / highcharts-react-native

Other
103 stars 81 forks source link

On IOS I can only render series with 110670 data points #124

Open omertimucin opened 3 years ago

omertimucin commented 3 years ago

I have a really simple app form one of the examples. When I tried to populate the chart with more than 200k data for a series I encountered this problem. When I give 4 series of 100k data it renders without a problem.Waits for a second or two and it is there but when I try to render a series with 110671 data points it doesn't render at all. No error, no exception just waits endlessly without doing anything. 110670 data points renders just fine in one or two seconds like I mentioned above. If I add another series data point limit for each individual series goes down by one. If I want to render two series for example, now my limit is 110669 data points. In Android builds it works just fine without any limit. I encounter this problem only in IOS builds. Here is my App.js:

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

const modules = ['boost']

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

    let chartSeries = []

    let activePower = {name:"Active Power",boostThreshold:1,type:'line', tooltip:{valueDecimals: 2, valueSuffix: " W"},data:[]};
    let activePower2 = {name:"Active Power2",boostThreshold:1,type:'line', tooltip:{valueDecimals: 2, valueSuffix: " W"},data:[]};
    let activePower3 = {name:"Active Power2",boostThreshold:1,type:'line', tooltip:{valueDecimals: 2, valueSuffix: " W"},data:[]};

    for(let i= 0; i < 110669; i++){
      let point = [i+1,0]
      let point2 = [i+1,2]
      let point3 = [i+1,3]
      activePower.data.push(point)
      activePower2.data.push(point2)
      activePower3.data.push(point3)
    }

    chartSeries.push(activePower);
    chartSeries.push(activePower2);
    // chartSeries.push(activePower3);

    this.state = {
        chartOptions: {
          tooltip: {
            xDateFormat: '%A-%b-%e %H:%M:%S',
            shared: true
          },
          boost:{
            enabled:true,
            allowForce:true
          },
          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 there something wrong with my setup?

sebastianbochan commented 3 years ago

Hi @omertimucin, Thank you for reporting. Could you attach your series object as a JSON? I will try to reproduce the issue in the native Highcharts / JS.

omertimucin commented 3 years ago

I think there is nothing special with my series object. You can create it just the same. I create it like this:

let chartSeries = []

    let activePower = {name:"Active Power",boostThreshold:1,type:'line', tooltip:{valueDecimals: 2, valueSuffix: " W"},data:[]};

    for(let i= 0; i < 110671; i++){
      let point = [i+1,0]
      activePower.data.push(point)
    }

    chartSeries.push(activePower);

As I said, if i set the limit like this it doesn't render for me. If I set it to 110670 it works.

Sorry for the late reply and thanks for helping.