useChartAnimation

The draw-in animation props every WunderUI chart passes to its Recharts series.

Returns isAnimationActive, animationDuration, animationEasing and animationBegin for a Recharts series. The series draw in once on mount and then stop animating, so a resize or new data does not replay the draw-in. Under reduced motion they never animate.

See alsoLine Chart

Import

import { useChartAnimation } from "@wunderui/react"

Comes with WunderUI Core and Pro, in the @wunderui/react package from your plan. See the plans.

Signature

useChartAnimation(animate?: boolean, appear?: ChartAppearState | undefined): { isAnimationActive: boolean; animationDuration: number; animationEasing: "ease-out"; animationBegin: number; }

Parameters

Returns

{ isAnimationActive: boolean; animationDuration: number; animationEasing: "ease-out"; animationBegin: number; }

Examples

import { Line, LineChart } from "recharts"
import { useChartAnimation } from "@wunderui/react"

export function TrendLine({ data }: { data: { day: string; value: number }[] }) {
  const animation = useChartAnimation()
  return (
    <LineChart width={320} height={120} data={data}>
      <Line dataKey="value" stroke="var(--chart-1)" dot={false} {...animation} />
    </LineChart>
  )
}

Notes

• Use it only in a custom chart built from Recharts parts; the WunderUI charts already call it.
• Pass animate={false} to switch the draw-in off, for example in a table of many small charts.
• With useInViewAppear, pass its state as the second argument: the series then animate exactly while the appear sequence runs.