Help!, how to create horizontal scrollable realtime chart

Hello, i need to create a horizontal scrollable areachart,

for me what is happening

1. is the data gets crumbled together and brush component is also not moving.it stays fixed.
2. I have set the startIndex and endIndex on brush component.

Thankyou

Code:

  const [arr, setArr] = React.useState([
    { X: 0 },
    { X: 0 },
    { X: 0 },
    { X: 5 },
    { X: 5 },
    { X: 5 },
  ]);

  const timeoutRef = React.useRef(null);

  const validate = React.useCallback(() => {
    setArr((prevState) =>
      [...prevState, { X: Math.random() >= 0.5 ? 5 : 0 }].slice(1)
    );
  }, []);

  React.useEffect(() => {
    if (timeoutRef.current !== null) {
      clearTimeout(timeoutRef.current);
    }
    const interval = 6000;
    const speed = 1000;
    for (let i = 0; i < interval; i++) {
      timeoutRef.current = setTimeout(() => {
        timeoutRef.current = null;
        validate();
      }, i * speed);
    }
  }, [validate]);
  return (
    <div>
      <h1>{time}</h1>
      <AreaChart
        width={730}
        height={250}
        data={arr}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        {/* <CartesianGrid strokeDasharray='3 3' /> */}

        <YAxis />
        <XAxis additive='sum' />
        <Tooltip />
        <Legend />
        <Area
          type='monotone'
          dataKey='X'
          stroke='#8884d8'
          isAnimationActive={false}
          additive='sum'
        />
        <Brush startIndex={0} endIndex={10}>
          <AreaChart>
            <Area dataKey='X' isAnimationActive={false} />
          </AreaChart>
        </Brush>
      </AreaChart>
    </div>
  );

[thareshjose]

The chart add a feature that enables it have a sticky Y-axis and a proper scrollable x-axis (without using the current brush implementation).

[ckifer]

hey @valentine-dev I don’t think anyone has touched this in a while - recharts hasn’t had anyone working on it in a bit (I’m just a community member who started contributing), but we’re trying to find contributors and get things moving again. Feel free to make a PR if you feel you could create a fix/enhancement for it. For now, we’re focusing on making it easier for people to contribute. Added some labels so this doesn’t get lost