Animated Line Chart

A line chart whose path draws on from left to right

Installation

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

Usage

tsx

// 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}
  />
);

With Backdrop

Renders transparent — supply the background via Backdrop:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { AnimatedLineChart } from "@/components/remocn/animated-line-chart";
 
<Backdrop fill={{ type: "color", value: "#0a0a0a" }}>
  <AnimatedLineChart data={[12, 19, 8, 15, 22, 18, 28, 25, 32]} strokeColor="#22c55e" />
</Backdrop>

Props8

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

datanumber[]
Y-values of the chart. Auto-scaled to the available height.
Default[12, 19, 8, 15, 22, 18, 28, 25, 32]
widthnumber
SVG viewBox width
Default1000
heightnumber
SVG viewBox height
Default500
strokeColorstring
Color of the line stroke
Default"#22c55e"
strokeWidthnumber
Line stroke width in pixels
Default4
gridColorstring
Grid and axis line color
Default"#27272a"
showDotboolean
Render a dot at the leading edge of the line as it draws
Defaulttrue
classNamestring
Optional className passed to the outer container