Line Chart

Dashboards

About

A retro-styled line chart for visualizing trends and data over time, with configurable grid, tooltip, and multi-line support built on Recharts.

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

Code

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

Usage.tsx

import LineChart from "@/components/ui/line-chart";

const data = [
  { month: "Jan", revenue: 186, expenses: 120 },
  { month: "Feb", revenue: 205, expenses: 140 },
  { month: "Mar", revenue: 237, expenses: 160 },
  { month: "Apr", revenue: 273, expenses: 150 },
  { month: "May", revenue: 309, expenses: 190 },
  { month: "Jun", revenue: 350, expenses: 210 },
];

export default function LineChartDemo() {
  return (
    <div className="w-full max-w-2xl p-6 border rounded-lg bg-background">
      <h3 className="text-lg font-bold mb-1">Revenue vs Expenses</h3>
      <p className="text-sm text-muted-foreground mb-4">January - June 2024</p>
      <LineChart
        data={data}
        index="month"
        categories={["revenue", "expenses"]}
        strokeColors={["#2563eb", "#f97316"]}
        valueFormatter={(value) => `$${value}`}
      />
    </div>
  );
}