Диаграмма

Линейный график

Используйте любые ключи данных в Recharts Line, а подписи и цвета темы задавайте через ChartConfig.

Пример

Интерактивный пример

Использование

Импортируйте компонент из публичной точки входа пакета.

"use client";

import {
  ChartContainer,
  type ChartConfig,
  ChartTooltip,
  ChartTooltipContent,
} from "denjs-ui";
import { CartesianGrid, Line, LineChart, XAxis } from "recharts";

const data = [
  { name: "Jan", revenue: 186, cost: 80 },
  { name: "Feb", revenue: 305, cost: 200 },
  { name: "Mar", revenue: 237, cost: 120 },
];

const config = {
  revenue: { label: "Revenue", color: "var(--chart-1)" },
  cost: { label: "Cost", color: "var(--chart-2)" },
} satisfies ChartConfig;

export function Example() {
  return (
    <ChartContainer config={config} className="h-64 w-full">
      <LineChart accessibilityLayer data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="name" axisLine={false} tickLine={false} />
        <ChartTooltip content={<ChartTooltipContent marker="line" />} />
        <Line dataKey="revenue" stroke="var(--color-revenue)" dot={false} />
        <Line dataKey="cost" stroke="var(--color-cost)" dot={false} />
      </LineChart>
    </ChartContainer>
  );
}