Signals
Animated Bar Chart
Animated data bar chart scene.
ScenesignalsAdvanced
Install
npx remotion-ui@latest add animated-bar-chartData-first bar chart scene with staggered values and labels.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add animated-bar-chartImport after install
@/remotion/scenes/animated-bar-chart- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: data, maxValue, valueFormatter, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { AnimatedBarChart } from "@/remotion/scenes/animated-bar-chart";
<AnimatedBarChart data={[{ label: "Views", value: 120000 }]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | ChartDatum[] | — | Bar labels and values. |
| maxValue | number | — | Optional fixed max domain. |
| valueFormatter | (value: number) => string | — | Value label formatter. |