Trying to update high chart data - react-native

Question

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
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 } ]

Answer 1

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:
Without React: https://jsfiddle.net/BlackLabel/37cdryg9/
With React: https://codesandbox.io/s/highcharts-react-demo-forked-q3whu