Диаграмма

Столбчатая диаграмма

Используйте BarChart и Bar напрямую без фиксированной схемы данных и подключайте общую подсказку только при необходимости.

Пример

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

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

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

"use client";

import {
  ChartContainer,
  type ChartConfig,
  ChartTooltip,
  ChartTooltipContent,
} from "denjs-ui";
import { Bar, BarChart, CartesianGrid, 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">
      <BarChart accessibilityLayer data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="name" axisLine={false} tickLine={false} />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
        <Bar dataKey="cost" fill="var(--color-cost)" radius={4} />
      </BarChart>
    </ChartContainer>
  );
}