RadialChart

Gráfico radial en SVG. Permite representar barras de progreso circular simples con texto central descriptivo, o anillos de actividad concéntricos apilados con leyendas dinámicas.

Actividad80%

Ejercicio55%

De Pie35%

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { RadialChart } from "@tsukira/ui"; {/* Modo Anillo Único (Gauge) */}<RadialChart  value={78}  tone="brand"  label="Completado"/> {/* Modo Concéntrico (Múltiples Anillos) */}<RadialChart  data={[    { name: "Pasos", value: 85, color: "brand" },    { name: "Calorías", value: 62, color: "success" },    { name: "Tiempo", value: 45, color: "info" },  ]}/>

Ejemplos#

Playground

Prueba el modo concéntrico o la barra de progreso

Actividad80%

Ejercicio55%

De Pie35%

modo de visualización

OpcionesshowLegend

Progreso Radial Simple

Utilizado como indicador circular del estado de carga o meta completada

API#

RadialChartPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'data'>

Prop	Tipo	Default	Descripción
`data`	`RadialChartRing[]`	—	Lista de anillos (concéntricos). Si se provee, se ignora "value"
`value`	`number`	—	Valor de anillo único (0 a 100)
`tone`	`ChartTone`	—	Tono del anillo único
`label`	`string`	—	Etiqueta descriptiva central para anillo único
`valueFormatter`	`(value: number) => string`	—	Formateador para los valores en el centro o leyenda
`showLegend`	`boolean`	—	Mostrar leyenda (solo si data existe)
`height`	`number \| string`	—	Altura del contenedor del gráfico