Диаграмма

Компактный линейный график

Используйте LineChart напрямую внутри небольшого ChartContainer без ограничений на схему данных и параметры Recharts.

Пример

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

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

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

"use client";

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

const data = [{ value: 18 }, { value: 30 }, { value: 24 }];
const config = {
  value: { label: "Value", color: "var(--chart-1)" },
} satisfies ChartConfig;

export function Example() {
  return (
    <ChartContainer config={config} className="h-20 w-64 aspect-auto">
      <LineChart accessibilityLayer data={data}>
        <Line
          dataKey="value"
          stroke="var(--color-value)"
          dot={false}
        />
      </LineChart>
    </ChartContainer>
  );
}