react-native-highcharts icon indicating copy to clipboard operation
react-native-highcharts copied to clipboard

Chart animates in browser, but no in react-native?

Open bitabs opened this issue 7 years ago • 1 comments

I've got this code snippet which animates perfectly in jsfiddle But when I try to use the same code inside my conf, it doesn't animate, and just shows the first few points.

I've opted the main code in here for now for this question sake. But the main code is this:

    let defaultConf = {
      chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
          load: function () {
            var testing = (function() {
              var _x = -1;
              var _max = _data2.length;

              return function() {
                _x = (_x + 1) % _max;

                return {
                  x: Date.now(),
                  y: _data2[_x]
                };
              };
            })();

            // set up the updating of the chart each second
            var series = this.series[0];
            setInterval(function() {
              series.addPoint([testing().x, testing().y], true, true, false);
              //series.setData(_data, true)
            }, 30);
          }
        }
      },
      exporting: {
        enabled: false
      },
      series: [{
        name: 'Random data',
        pointStart: Date.now()-30*100,
        pointInterval: 30,
        data: (function() {
          var data = [];
          data = _data;
          return data;
        }())
      }]
    };

    return(
      <View>
        <ChartView
          style={{height:200, width: 400}}
          config={defaultConf}
          options={options}
        />
      </View>
    )

See the jsfiddle. As you can see, it works in browser but not in phone. Why is that?

Update

It seems it stops animation when this line is added:

            var testing = (function() {
              var _x = -1;
              var _max = _data2.length;

              return function() {
                _x = (_x + 1) % _max;

                return {
                  x: Date.now(),
                  y: _data2[_x]
                };
              };
            })();

Any ideas?

bitabs avatar Feb 06 '18 12:02 bitabs

@Infinity0106 Could you please assist me on this. I see one of my issues is something never asked before.

bitabs avatar Feb 06 '18 15:02 bitabs