Line Chart Draw
SVG line chart that draws itself on.
PrimitiveData & mediaAdvanced
line-chart-draw30fps · 960×540
Install
$ npx remotion-ui@latest add line-chart-drawA line chart on a rounded value axis, drawn on by a single progress value: the stroke evolves along its own length, the gradient fill is wiped in behind it, and each dot lands as the tip passes. Curves are a clamped cardinal spline, so the line never overshoots past a value that is not in the data.
Set showAxis={false} and includeZero={false} for a sparkline.
Advanced. Installs @remotion/paths.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/line-chart-draw- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: points, width, height, color, 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 { LineChartDraw } from "@/remotion/primitives/line-chart-draw";
<LineChartDraw
points={[
{ x: 0, y: 12000, label: "Jan" },
{ x: 1, y: 24000, label: "Feb" },
]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| points* | ChartPoint[] | - | Chart points. `label` supplies the x-axis tick. |
| width | number | - | Drawing width. Defaults to the composition width — pass the slot width inside padding. |
| height | number | - | Drawing height. Defaults to 40% of the composition height. |
| color | string | "#e8b86d" | Line, area and dot colour. |
| strokeWidth | number | - | Line weight. Scales with the chart width by default. |
| variant | "smooth" | "linear" | "smooth" | Clamped cardinal spline, or straight segments. |
| showAxis | boolean | true | Gridlines and value labels on rounded ticks. |
| showXLabels | boolean | true | Category labels under the plot. |
| showArea | boolean | true | Gradient fill, wiped in with the draw. |
| showDots | boolean | true | Dot deposited on each point as the line passes it. |
| showHead | boolean | true | Glowing dot riding the tip while the line draws. |
| showEndLabel | boolean | false | Value callout on the final point. |
| includeZero | boolean | true | Anchor the axis at zero. Turn off for sparklines. |
| valueFormatter | (value: number) => string | - | Formats axis ticks and the end label. |
| durationInFrames | number | 70 | Draw-on duration. |
| delayInFrames | number | 0 | Delay before the draw starts. |
| frame | number | - | Frame override — pass the parent frame inside a Sequence. |