How do i reset animation here?

[dellwatson]

somehow when i assign ref to it always undefined.

and i try a lot of things, still not working out.

this is my code:

import React, { useRef, useEffect } from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";
import { useInView } from "react-intersection-observer";

const StatsChart = ({ data, ...rest }) => {
  const ref = useRef();
  const [inViewRef, inView] = useInView({
    threshold: 0.3,
  });
  console.log(ref, "ref", inView, data);

  //   useEffect(() => {
  //     if (ref.current) {
  //       ref.current.seek(0);
  //     }
  //   }, [data]);
  return (
    <div ref={inViewRef}>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart ref={ref} {...rest}>
          <Line
            type="linear"
            dataKey="pv"
            stroke="#84D4BC"
            strokeWidth={1}
            isAnimationActive={inView} // set animation based on whether chart is in view
            animationDuration={1000} // set animation duration
            animationBegin={() => {
              return ref.current?.getTotalLength() || 0;
            }}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};

[Yilun-Sun]

Hi @dellwatson , could you please provide a example from codesandbox? Thanks!

[k-wakamatsu-tms]

It worked if the animation property was set as follows.

isAnimationActive={isInView}
animationBegin={isInView ? 0 : undefined}
animationDuration={isInView ? 1500 : undefined}