Donut Chart

Charts

SVG donut/pie chart with segments, legend and optional center label/value.

Instalação via CLI

$ npx kikitocn add donut-chart

Interno:

@/lib/utils

Exemplo de uso

Donut ChartExample.tsx

import { DonutChart } from "@/components/ui/cn/donut-chart/DonutChart";

export function DonutChartExample() {
  return (
    <DonutChart />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`segments*`	`DonutSegment[]`	—	Fatias: { label, value, color? }
`size`	`number`	`160`	Diâmetro do donut em px
`strokeWidth`	`number`	`28`	Espessura do anel em px
`showLegend`	`boolean`	`true`	Exibe legenda das fatias
`centerLabel`	`string`	`undefined`	Texto secundário no centro
`centerValue`	`string \| number`	`undefined`	Valor principal exibido no centro

Carregando…