DonutChart
Gráfico de dona o pastel nativo con animaciones circulares fluidas. Soporta etiquetas de resumen centrales personalizables, interactividad en hover ampliando la porción activa y leyendas interactivas para filtrar.
Instalación#
bash
pnpm add @tsukira/uiUso#
tsx
import { DonutChart } from "@tsukira/ui"; const data = [ { name: "SaaS", value: 450 }, { name: "Servicios", value: 240 }, { name: "Consultorías", value: 120 },]; <DonutChart data={data} variant="donut" label="Total Ventas"/>Ejemplos#
Playground
Prueba dona o pastel y configura la interactividadvariante
Variante Pie (Pastel) Puro
Oculta el agujero central mostrando sectores completosAPI#
DonutChartPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'data'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
data* | { name: string; value: number }[] | — | Datos del gráfico |
colors | ChartTone[] | — | Tonos de color de cada porción |
showLegend | boolean | — | Mostrar leyenda interactiva |
showLabel | boolean | — | Mostrar etiquetas o métricas en el centro |
label | string | — | Etiqueta descriptiva en el centro (solo variante donut) |
valueFormatter | (value: number) => string | — | Formateador para los valores numéricos |
variant | 'donut' | 'pie' | — | Variante: dona o pie completo |
showTooltip | boolean | — | Mostrar tooltip interactivo en hover |
height | number | string | — | Altura del contenedor del gráfico |