Charts

Bar Chart — editable Remotion component

An adaptive animated bar chart for ranked metrics and categorical comparisons.

Component details

Agent Motion installs components into an existing Remotion project. If you are starting fresh, create the standard project structure first:

npx @agent-motion/cli create remotion my-remotion-video

Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.

npx @agent-motion/cli add bar-chart@0.2.0

The chart has no built-in background, title, border, or card surface; place it directly over the scene.
Presets are bundles of public prop values: choose editorial, gradient, dark, minimal, or inside, then use explicit props to override the preset.
Use for comparing three to seven categorical values and keep labels aligned with value order.
Use secondaryAccentEnabled for two-color gradients and highlightLeading to accent the first maximum bar.
Use gridVisible to hide all grid lines and gridDashed to switch the grid between dashed and solid.
Use labelsVisible and valuesVisible to remove text layers independently, and valuePosition to place numeric values above or inside bars.
Use labelSizePercent and valueSizePercent for responsive typography, or exact font-size props for fixed sizing.
Use barRadius and barGapPercent to tune bar shape and density.
The bars fill the resolved width and height and remain adaptive in landscape, portrait, and square compositions.
The component is visible from frame zero and only animates its internal bars.
Leave x, y, width, and height unset for centered eighty-percent sizing.
Use Area Chart or Signal Chart when values represent a continuous timeline.