Trying to update high chart data

user_3356835 0
Viewed 451

I am trying to update the data series on the update button by providing new series. As the result, new series will be a plotting along with the old series.

And After plotting the new series, the values on are X-axis is clear up. Here I Am attaching the code snippet please have look.

Initial State config:

 this.state = {
  chartOptions: {
    credits: {
      enabled: false,
    },
    chart: {
      type: 'spline',
    },

    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: [
      {
          title: {
          text: 'Value',
        },

        gridLineWidth: 1,

        lineWidth: 1,
        opposite: true,
        

        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
    },
    series: [
      {
        showInLegend: false,

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

      },
    ],
  }
};

Update Function:

updateSeries = () => {

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

}

Graph Render code:

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


);

}

After updating graph looks like enter image description here

Class Component Code: https://gist.github.com/cupatil/da00b0ab0866e3a4f9306f0425e92582

Also tried this code using a functional component.

Using Functional Component Code: https://gist.github.com/cupatil/2fc1862f64f3a511158ced3c6b64d215

But the same thing happens series changed but not able to plot the graph property as per the image. Also, X-Axis data not calculated properly.

Sample Series data that I am using:

[ { x: 1607883000000, y: 1.6093 },{ x: 1607882940000, y: 1.6094 },{ x: 1607882880000, y: 1.6093 },{ x: 1607882820000, y: 1.6094 },{ x: 1607882760000, y: 1.6094 },{ x: 1607882700000, y: 1.6094 },{ x: 1607882640000, y: 1.6095 },{ x: 1607882580000, y: 1.6094 },{ x: 1607882520000, y: 1.6095 },{ x: 1607882460000, y: 1.6093 },{ x: 1607882400000, y: 1.6095 },{ x: 1607882340000, y: 1.6095 },{ x: 1607882280000, y: 1.6088 },{ x: 1607882220000, y: 1.6096 },{ x: 1607882160000, y: 1.6095 },{ x: 1607882100000, y: 1.6096 },{ x: 1607882040000, y: 1.6096 },{ x: 1607881980000, y: 1.6096 },{ x: 1607881920000, y: 1.6097 },{ x: 1607881860000, y: 1.6097 },{ x: 1607881800000, y: 1.6099 },{ x: 1607881740000, y: 1.6101 },{ x: 1607881680000, y: 1.61 },{ x: 1607881620000, y: 1.61 },{ x: 1607881560000, y: 1.6099 },{ x: 1607881500000, y: 1.6099 },{ x: 1607881440000, y: 1.6099 },{ x: 1607881380000, y: 1.6098 },{ x: 1607881320000, y: 1.6099 },{ x: 1607881260000, y: 1.6098 },{ x: 1607881200000, y: 1.6098 },{ x: 1607881140000, y: 1.6098 },{ x: 1607881080000, y: 1.6099 },{ x: 1607881020000, y: 1.6098 },{ x: 1607880960000, y: 1.6099 },{ x: 1607880900000, y: 1.6098 },{ x: 1607880840000, y: 1.6098 },{ x: 1607880780000, y: 1.6099 },{ x: 1607880720000, y: 1.6098 },{ x: 1607880660000, y: 1.6096 },{ x: 1607880600000, y: 1.6097 },{ x: 1607880540000, y: 1.61 },{ x: 1607880480000, y: 1.6099 },{ x: 1607880420000, y: 1.6101 },{ x: 1607880360000, y: 1.61 },{ x: 1607880300000, y: 1.6101 },{ x: 1607880240000, y: 1.61 },{ x: 1607880180000, y: 1.6101 },{ x: 1607880120000, y: 1.6101 },{ x: 1607880060000, y: 1.61 },{ x: 1607880000000, y: 1.6099 },{ x: 1607879940000, y: 1.6099 },{ x: 1607879880000, y: 1.6098 },{ x: 1607879820000, y: 1.61 },{ x: 1607879760000, y: 1.6097 },{ x: 1607879700000, y: 1.6098 },{ x: 1607879640000, y: 1.6096 },{ x: 1607879580000, y: 1.6096 },{ x: 1607879520000, y: 1.6097 },{ x: 1607879460000, y: 1.6096 },{ x: 1607879400000, y: 1.6095 } ]

react-native highcharts
1 Answers

All right, I was doing it the other way around, and that's why I was not able to reproduce the described error. Well, so now I see the problem, but as I thought, it's caused by passing not sorted (x ascending order) data, what you can notice after opening the browsers console, and see the Highcharts #15 error.

In order to make it work correctly, you need to always make sure that you're passing the data, which is sorted in ascending order (point x values are increasing along with the array element index).

So, to sum up, sort the array:

[

  // data here

].sort((a, b) => a.x - b.x)

then change the the way you prepare (slice) the initial data:

data.slice(data.length - 1 - 15, data.length - 1)

and now it should work as expected.

Live examples:

user_85477750
Related