useInViewAppear

Plays a chart's appear sequence once, when the chart scrolls into view.

Attach ref to the chart root and spread data-chart-appear={state} on it. The state stays hidden until a quarter of the root is visible, turns in while the sequence plays and done after it. A chart that is already on screen at mount plays right away.

See alsoArea Chart

Import

import { useInViewAppear } from "@wunderui/react"

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

Signature

useInViewAppear<T>(animate?: boolean, ready?: boolean, threshold?: number): { ref: React.Dispatch<React.SetStateAction<T | null>>; state: ChartAppearState; }

Parameters

Returns

{ ref: React.Dispatch<React.SetStateAction<T | null>>; state: ChartAppearState; }

Examples

import { useChartAnimation, useInViewAppear } from "@wunderui/react"

export function RevenueChart({ data, loading }: { data: Point[]; loading: boolean }) {
  const { ref, state } = useInViewAppear<HTMLDivElement>(true, !loading)
  const animation = useChartAnimation(true, state)
  return (
    <div ref={ref} data-chart-appear={state} className="h-48">
      {/* Recharts series receive {...animation} */}
    </div>
  )
}

Notes

• static means no motion: animate={false}, reduced motion, a background tab or a browser without IntersectionObserver.
• ready={false} (the chart shows its loading skeleton) resets it, so the series arrive with the motion once the data does.
• The styles for data-chart-appear ship in the WunderUI stylesheet; the hook only sets the state.