Charts
Donut Chart — editable Remotion component
A large, transparent segmented donut chart with an animated sweep, centered total, and optional legend.
Component details
- Version
- 0.3.0
- License
- MIT
- Duration
- 5.0 seconds
- Dimensions
- 1920 × 1080
Prerequisite: Create a Remotion project
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
Add editable source
Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.
npx @agent-motion/cli add donut-chart@0.3.0
Agent guidance
- Choose dark for a dark surrounding scene and clean or soft for a light surrounding scene.
- Disable legendVisible when the donut should occupy nearly the entire component box.
- Use legendSizePercent to scale all legend elements relative to the component width.
- 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.