Bar chart
Activity Waveform Chart
A dense spending waveform with a metric header, hover tooltip and a split ratio bar with legend.
Dozens of thin SVG bars grow from the baseline in a left-to-right wave, the peak is highlighted by default and a segmented ratio bar animates its width to break down the total.
Dependencies
framer-motiontailwind-mergetailwind-variants
Interaction type
Hover or focus any bar to read its value; the ratio bar and legend summarize the split.
Usage
import { ActivityWaveformChart } from "@/registry/new-york-v4/ui/activity-waveform-chart"
<ActivityWaveformChart data={samples} value="−$3,245.00" />Sales activity
This week you spent
−$3,245.00
MonSun
Credit card83%Cash17%