Vectors
Line Chart Draw
SVG line chart draw-on primitive.
PrimitivevectorsAdvanced
Install
npx remotion-ui@latest add line-chart-drawDraw a normalized SVG line chart with optional point reveals.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add line-chart-drawImport after install
@/remotion/primitives/line-chart-draw- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: points, showDots, durationInFrames, 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 { LineChartDraw } from "@/remotion/primitives/line-chart-draw";
<LineChartDraw points={[{ x: 0, y: 12 }, { x: 1, y: 24 }]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| points* | { x: number; y: number }[] | — | Chart points. |
| showDots | boolean | true | Reveal dots along the line. |
| durationInFrames | number | 70 | Draw-on duration. |