title: How can i create a horizontal scrolling chart in react using rechartjs?
body: <p>I'd like to create a areachart with <code>Rechart.js</code> but having the y-axis fixed position when i scroll.</p>
  <p>Whats happening for me is the data gets crumbled, how could i make it scroll-able, i could'nt able to find in the docs also, Any ideas?</p>
  <p>Thank you</p>
  <pre><code>  const validate = React.useCallback(() =&gt; {
      setArr((prevState) =&gt;
        [...prevState, { X: Math.random() &gt;= 0.5 ? 5 : 0 }]
      );
    }, []);
  
    React.useEffect(() =&gt; {
      if (timeoutRef.current !== null) {
        clearTimeout(timeoutRef.current);
      }
      const interval = 6000;
      const speed = 1000;
      for (let i = 0; i &lt; interval; i++) {
        timeoutRef.current = setTimeout(() =&gt; {
          timeoutRef.current = null;
          validate();
        }, i * speed);
      }
    }, [validate]);
    return (
      &lt;div&gt;
        &lt;h1&gt;{time}&lt;/h1&gt;
        &lt;AreaChart
          width={730}
          height={250}
          data={arr}
          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        &gt;
          {/* &lt;CartesianGrid strokeDasharray='3 3' /&gt; */}
  
          &lt;YAxis /&gt;
          &lt;XAxis additive='sum' /&gt;
          &lt;Tooltip /&gt;
          &lt;Legend /&gt;
          &lt;Area
            type='monotone'
            dataKey='X'
            stroke='#8884d8'
            isAnimationActive={false}
            additive='sum'
          /&gt;
          &lt;Brush startIndex={0} endIndex={10}&gt;
            &lt;AreaChart&gt;
              &lt;Area dataKey='X' isAnimationActive={false} /&gt;
            &lt;/AreaChart&gt;
          &lt;/Brush&gt;
        &lt;/AreaChart&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>