Charts

Area Chart — editable Remotion component

An adaptive animated area chart for continuous trends, cumulative metrics, and contextual growth stories.

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 area-chart@0.2.0

The chart has no built-in background, border, or card surface; place it directly over the scene.
Presets are bundles of public prop values: choose warm editorial, violet-cyan gradient, neon dark, line-only minimal, or typography-led bold, then use explicit visual props to override the preset.
Set secondaryAccentEnabled to false to remove the area fill completely and keep only the primary line.
Use gridVisible to hide all grid lines and gridDashed to switch both horizontal and vertical lines between dashed and solid.
Use valueSizePercent for responsive active-value sizing, valueFontSize for an exact override, and labelFontSize to tune axis labels independently.
Set labelsVisible to false to hide the horizontal-axis data labels without hiding the active value.
Set valuesVisible to false to hide every data-point marker and the animated active value together.
Use lineWidth to control the thickness of the main chart curve.
The minimal preset disables secondaryAccentEnabled, gridVisible, labelsVisible, valuesVisible, and glowVisible so only the primary line remains.
Keep labels short and order data exactly as it should be read.
The component is visible from frame zero and only animates its internal data or route.
Leave x, y, width, and height unset for centered eighty-percent sizing.