Animated Line Chart

SVG line chart with path drawing animation, fill area, data point dots, and grid lines. Line draws itself when scrolled into view.

chartlinesvgpath-drawing

bash

# Copy animated-line-chart.tsx to your project
cp components/ui/animated-line-chart.tsx your-project/components/ui/animated-line-chart.tsx

tsx

import { AnimatedLineChart } from "@/components/ui/animated-line-chart";

tsx

<AnimatedLineChart
  data={[
    { label: "Jan", value: 30 },
    { label: "Feb", value: 65 },
  ]}
  color="#10b981"
/>

AnimatedLineChart

components/ui/animated-line-chart.tsx

Preview

Revenue over time

JanFebMarAprMayJunJulAugSepOct

SVG line chart with path drawing animation, fill area, data point dots, and grid lines. Line draws itself when scrolled into view.

chartlinesvgpath-drawing

bash

# Copy animated-line-chart.tsx to your project
cp components/ui/animated-line-chart.tsx your-project/components/ui/animated-line-chart.tsx

tsx

import { AnimatedLineChart } from "@/components/ui/animated-line-chart";

tsx

<AnimatedLineChart
  data={[
    { label: "Jan", value: 30 },
    { label: "Feb", value: 65 },
  ]}
  color="#10b981"
/>

AnimatedLineChart

components/ui/animated-line-chart.tsx