Диаграмма

Компактная столбчатая диаграмма

Используйте небольшой ChartContainer и не добавляйте оси, сетку, подсказку и легенду, когда метрике нужен только спарклайн.

Пример

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

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

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

"use client";

import { ChartContainer, type ChartConfig } from "denjs-ui";
import { Bar, BarChart } 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">
      <BarChart accessibilityLayer data={data}>
        <Bar dataKey="value" fill="var(--color-value)" radius={3} />
      </BarChart>
    </ChartContainer>
  );
}