Диаграмма

Круговая диаграмма

Задайте цвета сегментов в ChartConfig и ссылайтесь на них из данных по тому же принципу, что и в других примерах.

Пример

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

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

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

"use client";

import {
  ChartContainer,
  type ChartConfig,
  ChartTooltip,
  ChartTooltipContent,
} from "denjs-ui";
import { Pie, PieChart } from "recharts";

const data = [
  { source: "direct", visitors: 420, fill: "var(--color-direct)" },
  { source: "search", visitors: 310, fill: "var(--color-search)" },
  { source: "social", visitors: 190, fill: "var(--color-social)" },
];

const config = {
  direct: { label: "Direct", color: "var(--chart-1)" },
  search: { label: "Search", color: "var(--chart-2)" },
  social: { label: "Social", color: "var(--chart-3)" },
} satisfies ChartConfig;

export function Example() {
  return (
    <ChartContainer config={config} className="mx-auto aspect-square h-64">
      <PieChart accessibilityLayer>
        <ChartTooltip
          content={<ChartTooltipContent showLabel={false} seriesKey="source" />}
        />
        <Pie
          data={data}
          dataKey="visitors"
          nameKey="source"
          innerRadius="55%"
        />
      </PieChart>
    </ChartContainer>
  );
}