Animated Area Chart

A theme-aware area chart built for executive dashboard surfaces and animated trend storytelling.

The chart uses Recharts for scales and tooltip lifecycle, then layers custom SVG masks, gradients, active dots and stroke drawing to make the path feel crafted instead of generic.

Dependencies

rechartsframer-motiontailwind-mergetailwind-variants

Interaction type

Hover or focus the path area to reveal the custom cursor, tooltip and highlighted point.

Usage

import { AnimatedAreaChart } from "@/registry/new-york-v4/ui/animated-area-chart"

<AnimatedAreaChart data={data} />

Revenue signal

Masked path, active cursor and custom SVG dots