Диаграмма

Диаграмма с областями

Соберите AreaChart и Area напрямую из Recharts, а размеры, цвета темы и подсказку добавьте через denjs-ui.

Пример

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

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

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

"use client";

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

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

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig;

export function Example() {
  return (
    <ChartContainer config={config} className="h-64 w-full">
      <AreaChart accessibilityLayer data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="name" axisLine={false} tickLine={false} />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Area
          dataKey="desktop"
          fill="var(--color-desktop)"
          stroke="var(--color-desktop)"
        />
        <Area
          dataKey="mobile"
          fill="var(--color-mobile)"
          stroke="var(--color-mobile)"
        />
      </AreaChart>
    </ChartContainer>
  );
}