Chart Line

Dashboards 32

About

A multi-series line and area chart built from plain data rows, with animated draw-in lines, halftone fill patterns, a snapping crosshair tooltip and a toggleable legend.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chart Line to your project and fits it to your theme.

Code

How Chart Line is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

const data = [
  { month: "Jan", revenue: 4200, expenses: 2800 },
  { month: "Feb", revenue: 5100, expenses: 3100 },
  { month: "Mar", revenue: 4800, expenses: 3400 },
  { month: "Apr", revenue: 6200, expenses: 3600 },
  { month: "May", revenue: 7100, expenses: 3900 },
  { month: "Jun", revenue: 6800, expenses: 4100 },
  { month: "Jul", revenue: 7600, expenses: 4300 },
  { month: "Aug", revenue: 8200, expenses: 4500 },
  { month: "Sep", revenue: 7900, expenses: 4600 },
  { month: "Oct", revenue: 8800, expenses: 4800 },
  { month: "Nov", revenue: 9400, expenses: 5100 },
  { month: "Dec", revenue: 10200, expenses: 5400 },
];

export default function ChartLineDemo() {
  return (
    <div className="flex w-full max-w-xl items-center justify-center p-6">
      <ChartLine
        title="Revenue"
        description="Jan – Dec 2025"
        data={data}
        index="month"
        series={[
          { key: "revenue", label: "Revenue" },
          { key: "expenses", label: "Expenses" },
        ]}
        valueFormat="currency"
      />
    </div>
  );
}