Hey folks I have a task to show user data on the chart (I'm using react-native slide charts) but it becomes a little bit tricky. So what I'm trying to achieve is next: I'm making a request and get the next data from the server:

{
  "trend": [92, 93, 94, 94, 93, 93, 94, 95, 95, 95, 95, 94, 96, 95, 96],
  "history": [1087, 112, 117, 190, 153, 163, 138, 166, 191, 191, 187, 163, 187, 177, 109, 107, 196, 175, 113, 192, 113, 112, 169, 109, 109, 157, 126, 170, 137, 146, 132, 114],
}

And I know that trend is data for the last 15 minutes with an interval of 1 min, and the history is data for the last 8 hours with an interval of 15 mins.

I need to map this data and show it on the chart. I'm trying to do the next:

const initialDateTime = dayjs();

const mappedTrend = data.trend.reverse().map((el, i) => ({
      x: i === 0 ? initialDateTime.valueOf() : initialDateTime.add(i * 1, 'minutes').valueOf(),
      y: el,
}));

const mappedHistory = data.history.reverse().map((el, i) => ({
      x: i === 0 ? initialDateTime.valueOf() : initialDateTime.add(i * 15, 'minutes').valueOf(),
      y: el,
}));

in output I have 2 arrays like {x: timestamp, y: value};

Then I'm adding it to the state and the chart looks at this data:

setState({data: [...mappedHistory, ...mapTrend]})

seems like it is ok till here, but now, for example, I need to load more data, after for example 5 minutes I can make another request and will get almost the same data but with different numbers, and I need now, to prolong the chart data with a new one, but how to do it? How to add data properly?

I prepared a snack here Problems are, the chart is looking quirky and when new data comes it also shows strange. And the thing is, on chart data should be in range on 24h that's why I use xRange on the chart. So any ideas on how to solve this or fix it?