Animating Area path with React Spring

[leo-petrucci]

I'm trying to animate @visx/shape's Area but I'm having trouble figuring out an easy way to do so.

I'm not using xychart's animated components as I wanted to have finer control over my graphs, but I'm regretting it now.

I assumed I would be able to put my path value into a useSpring and interpolate it when it changed:

          <Area
            data={data}
            x={(d) => dateScale(getDate(d)) ?? 0}
            y={(d) => shiftScale(getTotal(d)) ?? 0}
            strokeWidth={3}
            stroke="url(#area-gradient)"
            fill="none"
          >
            {({ path }) => (
              <>
                {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}
                <Path path={path(data)} />
              </>
            )}
          </Area>

//...

const Path = ({
  path,
}:
{
  path: any;
}) => {
  // We animate values when they change
  const { path: animatedPath } = useSpring({ path });

  return (
    <>
      <animated.path
        d={animatedPath}
        className="visx-area"
        strokeWidth="3"
        stroke="url(#area-gradient)"
        fill="none"
      />
    </>
  );
};

This works pretty well if the path value is longer than the previous one, but if I try to interpolate it to a smaller path I get:

Error: The arity of each "output" value must be equal

Which causes the graph not to animate.

Any tips on how to animate a line graph?

[williaster]

Hey @creativiii , yeah this wasn't as straight forward as I expected when implementing it for @visx/xychart and I hit the same arity issue you mention. I think overall react-spring default interpolation won't work when you have varying numbers of points.

The solution I used in xychart was to use the d3-interpolate-path as the interpolator and use react-spring to tween from 0 -> 1. If you are specifically interested in areas/closed paths, you might want to check out flubber which I think is by far the best interpolator, but it assumes closed paths (which is perfect for area but fails for lines).

Hope that helps!

Also curious what customization you'd like in your graphs that xychart doesn't currently support! (it definitely doesn't support everything, I higher level API usually means support for fewer things, but always curious about use cases! 😎 )

[leo-petrucci]

That's an amazing solution! Works perfectly 😁

My main problem with XYChart was that I already had another graph built without it which had really fine controls over the amount of ticks for its two Axes (using both the tickFormat and tickValues) but xycharts only allows me to set the number of ticks. I'm sure there's probably a way to get the two looking the same, but I already had a bunch of code written for one graph so I didn't really want to re-build it for this one.

I tried using a mix of xychart to display the line and grid from the grid package but I just couldn't get them to line up properly no matter how hard I tried.

Having them line up with each other was quite important!