HighChartComponent.js

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



export default class TradeView extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      chartOptions: {
        credits: {
          enabled: false,
        },
        chart: {
          type: 'spline',
          events: {
            load: function () {
              var points = this.series[0].points;
              points[0].update({
                marker: {
                  enabled: true,
                },
              });
            },


          },
        },

        title: {
          text: 'Chart',
        },
        plotOptions: {
          series: {
            shadow: false,
            marker: {
              enabled: false,
            },
          },
        },
        xAxis: {
          gridLineWidth: 1,
          type: 'datetime',
          lineColor: '#999',
          lineWidth: 1,

          title: {
            text: 'Time',
            style: {
              color: '#000',
            },
          },
        },
        yAxis: [
          {
            // allowDecimals: false,
            title: {
              text: 'Value',
            },

            gridLineWidth: 1,

            lineWidth: 1,
            opposite: true,
            // linkedTo: 0,

            plotLines: [
              {
                color: '#55c2ea',
                width: 2,
                value: props.data[0][1], // Need to set this probably as a var.
                label: {
                  text: props.data[0][1],
                  textAlign: 'left',
                  verticalAlign: 'middle',
                  style: {
                    color: '#55c2ea',
                    fontSize: 16,
                    borderWidth: 1,
                    backgroundColor: '#55c2ea',
                    borderColor: '#55c2ea',
                  },
                  x: 330,
                },
              },
            ],
            accessibility: {
              enabled: true,
            },
            opposite: true,
          },
        ],
        time: {
          useUTC: false
        },
        tooltip: {
          formatter: function () {
            var d = new Date(this.x),
              month = '' + (d.getMonth() + 1),
              day = '' + d.getDate(),
              year = d.getFullYear(),
              hour = d.getHours(),
              min = d.getMinutes();

            if (month.length < 2)
              month = '0' + month;
            if (day.length < 2)
              day = '0' + day;

            return [year, month, day].join('-') + " " + [hour, min].join(':') + ', ' + this.y;
          }
        },

        series: [
          {
            showInLegend: false,

            color: '#FF0000',
            data: props.data.slice(0, props.tradingInterval),

          },
        ],
      }
    };
  }

  componentDidUpdate(prevState, prevProps) {
    console.log("Prev: " + prevProps.tradingInterval);
    console.log("Current: " + this.props.tradingInterval);
  }

  updateSeries = () => {
    // The chart is updated only with new options.

   this.setState({ chartOptions: {
  series: [
    
    { 
      showInLegend: false,
      color: '#FF0000',
      data: this.props.data.slice(0, 15),}
  ]
} })


    
    
      
  }
  render() {
    return (
      <View style={styles.container}>
        <HighchartsReactNative
          styles={styles.chart}
          options={this.state.chartOptions}
        />
        <Button
          title="Refresh"
          onPress={this.updateSeries.bind(this)}/>
      </View>


    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },

  chart: {
    height: '50%',
    width: '100%',
    backgroundColor: 'black',
  },
});