Line Chart

Dashboards 13

About

A multi-series line chart with a scrubbable crosshair, legend toggles to show/hide series, and lines that smoothly morph when the data range changes.

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

"use client";

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

const data = [
  {
    key: "mon",
    label: "Monday",
    axisLabel: "Mon",
    values: { visits: 420, signups: 32 },
  },
  {
    key: "tue",
    label: "Tuesday",
    axisLabel: "Tue",
    values: { visits: 532, signups: 41 },
  },
  {
    key: "wed",
    label: "Wednesday",
    axisLabel: "Wed",
    values: { visits: 489, signups: 38 },
  },
  {
    key: "thu",
    label: "Thursday",
    axisLabel: "Thu",
    values: { visits: 612, signups: 55 },
  },
  {
    key: "fri",
    label: "Friday",
    axisLabel: "Fri",
    values: { visits: 701, signups: 63 },
  },
  {
    key: "sat",
    label: "Saturday",
    axisLabel: "Sat",
    values: { visits: 548, signups: 44 },
  },
  {
    key: "sun",
    label: "Sunday",
    axisLabel: "Sun",
    values: { visits: 597, signups: 50 },
  },
];

const series = [
  { key: "visits", label: "Visits" },
  { key: "signups", label: "Signups", dashed: true },
];

export default function LineChartDemo() {
  return (
    <div className="w-full max-w-xl p-6">
      <LineChart
        data={data}
        series={series}
        label="Weekly visits and signups"
      />
    </div>
  );
}