Line Chart

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

const data = [
  { label: "Jan", value: 186 },
  { label: "Feb", value: 305 },
  { label: "Mar", value: 237 },
  { label: "Apr", value: 173 },
  { label: "May", value: 409 },
  { label: "Jun", value: 214 },
];

export function MyLineChart() {
  return <LineChart data={data} />;
}

npx @aniui/cli add line-chart

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

const series = [
  {
    data: [
      { label: "Jan", value: 186 },
      { label: "Feb", value: 305 },
      { label: "Mar", value: 237 },
    ],
    color: "#2563eb",
  },
  {
    data: [
      { label: "Jan", value: 120 },
      { label: "Feb", value: 210 },
      { label: "Mar", value: 180 },
    ],
    color: "#f97316",
  },
];

export function MultiSeriesLineChart() {
  return <LineChart series={series} />;
}

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

// Smooth curves are the default. Set curved={false} for straight lines.
export function CurvedLineChart() {
  return <LineChart data={data} curved showDots />;
}

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

const series = [
  { data, color: "#2563eb" },
  { data: data2, color: "#f97316", dashed: true },
];

// Use dashed lines to distinguish series
export function DottedLineChart() {
  return <LineChart series={series} showDots={false} />;
}

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

export function InteractiveLineChart() {
  return <LineChart data={data} showDots showGrid />;
}

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

export function LineChartWithLegend() {
  return (
    <LineChart
      series={series}
      showLabels
      showGrid
      height={220}
    />
  );
}