FunnelChart with motion: when the data changes, every number turns on odometer wheels while the bars and the flow between them glide to their new heights.
$ pnpm dlx shadcn@latest add @dashral/motion-funnel-chartInstallation
$ pnpm dlx shadcn@latest add @dashral/motion-funnel-chartAdds components/dashral/motion/funnel-chart.tsx, the Funnel Chart it builds on (in components/dashral/), motion and the motion files every motion component shares. Or by its full URL: https://dashral.com/r/motion-funnel-chart.json
Usage
The same as Funnel Chart, imported from components/dashral/motion/ (with the npm package: @dashral/motion/components/funnel-chart): swap the import and it moves.
import { FunnelChart } from "@/components/dashral/motion/funnel-chart"
<FunnelChart data={steps} aria-label="Checkout funnel" />Examples
Compared with Default
The bars rise in and each value rises into its line; new data eases the bars and the flow while the numbers count to their new values.
Motion
New data turns every value, share and drop on odometer wheels, each digit as far as it travelled, while the bars and the flow glide to their new heights.
How the two editions differ in general, and which to use where: Motion.
API reference
Every prop of Funnel Chart, and every attribute of the element it renders. The Motion edition adds no props of its own.
FunnelChart
Also takes every prop of <div>(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
data | { key?: string; label: string; value: number }[]The steps in order, the first the widest. Required. | — |
percent | "first" | "previous"What the percentage under each value is of: the first step, or the step before. | "first" |
showLost | booleanWhat dropped since the step before, written in the space above each bar. | true |
height | numberThe bars' height at the first step, in pixels. | 200 |
color | stringAny CSS color for the bars and the flow between them. | "var(--chart-1)" |
locale / formatOptions | string / Intl.NumberFormatOptionsHow values are written. | LocaleProvider's |
aria-label | stringWhat the chart shows. | "Funnel chart" |
classNames | { step?, bar? }Classes for each step's column and its bar. | — |
Motion
- New data turns each value, its share and the drop above its bar on odometer wheels: each digit as far as it travelled, softly blurred as it turns.
- The bars and the flow between them glide to their new heights on the glide spring (--duration-considered, no overshoot); a drop's dashed space follows.
- On arrival the bars rise one after another, each value rising into its line with its bar, and the flow fades in behind them.
- With reduced motion it's simply there, and new data shows at once.