Animated Line Chart

A data-viz primitive built with SVG <path>. The full path length is computed analytically (sum of segment distances) and animated via strokeDasharray + strokeDashoffset. An optional leading dot rides the head of the line as it draws.

Installation

$ pnpm dlx shadcn@latest add @remocn/animated-line-chart

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { AnimatedLineChart } from "@/components/remocn/animated-line-chart";

const AnimatedLineChartScene = () => (
  <AnimatedLineChart
    data={[12, 19, 8, 15, 22, 18, 28, 25, 32]}
    strokeColor="#22c55e"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="AnimatedLineChart"
    component={AnimatedLineChartScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`data`	`number[]`	`[12, 19, 8, 15, 22, 18, 28, 25, 32]`	Y-values of the chart. Auto-scaled to the available height.
`width`	`number`	`1000`	SVG viewBox width.
`height`	`number`	`500`	SVG viewBox height.
`strokeColor`	`string`	`"#22c55e"`	Color of the line stroke.
`strokeWidth`	`number`	`4`	Line stroke width in pixels.
`background`	`string`	`"#0a0a0a"`	Outer background color.
`gridColor`	`string`	`"#27272a"`	Grid and axis line color.
`showDot`	`boolean`	`true`	Render a dot at the leading edge of the line as it draws.
`className`	`string`	—	Optional className passed to the outer container.

Notes

No getTotalLength()

The path length is computed analytically by summing distances between consecutive points. This avoids useEffect and DOM measurement, so the first frame renders correctly during server-side bundling.

Data range

The chart auto-scales to the min/max of data. If all values are equal, the line is drawn at the top of the chart area.