Animated Line Chart

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