通过在 Xasis 中显示 1 小时间隔的数据，Recharts 折线图显示奇怪

Question

I'm trying to make it similar to this chart but it shows strange.

I need a result like this image

Here's the demo project running on Stackbiltz

The x-axis shows from 9 am-3 pm (1-hour interval) and the time-value data interval is 1 minute but after doing this the line is strange (maybe too narrow). Do you have any ideas?

Thanks for your help.

Answer 1

there are too many data changes, it looks good only if you make the graph width at least 900px.

you can try to change the data once in 10 seconds then the graph look ok also with 250 px width

let j = 0
  let value = parseFloat(getRandomNumber(980, 1050).toFixed(2))
  for (let i = 0; i < totalRange / (60 * 1000) - 1; i++) {

    if (j % 10 === 0) {
      value = parseFloat(getRandomNumber(980, 1050).toFixed(2))
    }
    const next = start.add(1, 'minutes').valueOf();

    arr.push({
      time: next,
      value,
    });
    j++
  }