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 to explore, then click or tap a point to pin its tooltip until Escape or an outside press.

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