Animated Bar Chart
Ranked bar chart scene with a real value axis.
SceneData & mediaAdvanced
animated-bar-chart30fps · 960×540
Install
$ npx remotion-ui@latest add animated-bar-chartBars are measured against a rounded axis rather than the largest value, so the
longest bar stops short of the frame edge and the ticks under it read as a
scale. Each bar's length and its counter share one spring, and highlightLabel
lifts the row you are actually talking about.
Bars and their counters share one spring, so the number never leads the bar.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/animated-bar-chart- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: data, title, subtitle, maxValue, 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
Example
import { AnimatedBarChart } from "@/remotion/scenes/animated-bar-chart";
<AnimatedBarChart
title="Views by format"
data={[{ label: "Shorts", value: 124000, delta: "+32%" }]}
highlightLabel="Shorts"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | ChartDatum[] | - | Bar labels and values. Optional `color` and `delta` per bar. |
| title | string | - | Scene headline. |
| subtitle | string | - | Supporting line under the title. |
| maxValue | number | - | Fixed axis top. Defaults to a rounded domain above the largest bar. |
| valueFormatter | (value: number) => string | formatCompactNumber | Formats the value on the end of each bar. |
| highlightLabel | string | - | Label of the bar that carries accentColor. |
| showAxis | boolean | true | Gridlines and the value axis under the bars. |
| maxBars | number | 6 | Bars beyond this count are dropped rather than squeezed. |
| barColor | string | "#2dd4bf" | Series colour. |
| accentColor | string | "#e8b86d" | Colour for the highlighted bar. |