Me gustaría crear un gráfico de área con Rechart.js pero con la posición fija del eje y cuando me desplazo.

Lo que me sucede es que los datos se desmoronan, ¿cómo podría hacer que se pueda desplazar, tampoco pude encontrarlos en los documentos, alguna idea?

Gracias

 const validate = React.useCallback(() => { setArr((prevState) => [...prevState, { X: Math.random() >= 0.5 ? 5 : 0 }] ); }, []); 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> ); }