How to disable animation for LineChart in recharts?

Question

I was trying to disable animation in this way:

<ResponsiveContainer width="99%" height={300}>
    <LineChart isAnimationActive={false}
               animationDuration={0}
               height={300} width={400}
               data={chartData}>
        ...
    </LineChart>
</ResponsiveContainer>

But it doesn't work

Ronna

Answer 1

You need to disable the animations at line level.

<ResponsiveContainer width="99%" height={300}>
    <LineChart height={300} width={400} data={chartData}>
        <Line type="monotone" isAnimationActive={false} dataKey="pv" />
        <Line type="monotone" isAnimationActive={false} dataKey="uv" />
    </LineChart>
</ResponsiveContainer>

Check this JSFiddle to see an example.

Towland

Answer 2

The 99% is solving the problem or resizing, but left the slow animation problem left.

So I went with a JS solution instead

  const [chartMaxWidth, setChartMaxWidth] = useState(0);
  const chartRef = useRef(null);

  useEffect(() => {
    setChartMaxWidth(chartRef.current?.clientWidth || 0);
    const handleResize = () => {
      setChartMaxWidth(chartRef.current?.clientWidth || 0);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

and html

 <div ref={chartRef}>
 <div style={{ width: `${chartMaxWidth - 50}px`, overflow: 'hidden' }}>
    ... chart code here
    </div>
 </div>

Argyres