K
KoreUI

Chart Donut

Chart

Un donut. Con inner en cero es una tarta. Vive en su propio SVG cuadrado: no comparte escalas ni caja con las marcas cartesianas.

Donut

Cada fila del dataset es una porción. El agujero por defecto ocupa el 60% del radio.

Presupuesto por área
  • Producto 4.200 39.3 %
  • Marketing 2.800 26.2 %
  • Operaciones 1.900 17.8 %
  • Soporte 1.200 11.2 %
  • Otros 600 5.6 %
Presupuesto por área
Categoría
Producto
Marketing
Operaciones
Soporte
Otros 
<x-kore::chart :data="$presupuesto" x="categoria" title="Presupuesto por área">
    <x-kore::chart.donut y="monto" />
</x-kore::chart>
<x-kore::chart :data="$presupuesto" x="categoria" title="Presupuesto por área">
    <x-kore::chart.donut y="monto" />
</x-kore::chart>

Tarta con inner en cero

inner="0" cierra el agujero: la misma marca, sin donut. Una sola porción al 100% también se pinta: un arco de 360° es degenerado, y el componente lo parte en dos para evitar el bug que tiene medio internet.

Tráfico por canal
  • Orgánico 4.800 50.5 %
  • De pago 2.600 27.4 %
  • Social 1.400 14.7 %
  • Referidos 700 7.4 %
Tráfico por canal
Categoría
Orgánico
De pago
Social
Referidos 
<x-kore::chart :data="$canalTrafico" x="canal" title="Tráfico por canal">
    <x-kore::chart.donut y="visitas" inner="0" />
</x-kore::chart>
<x-kore::chart :data="$canalTrafico" x="canal" title="Tráfico por canal">
    <x-kore::chart.donut y="visitas" inner="0" />
</x-kore::chart>

La leyenda es automática

El donut trae su propia leyenda incorporada: no hace falta pedirla.

A diferencia de bar, line o area, un donut no necesita la marca chart.legend. Su leyenda sale siempre, en vertical, y ya imprime la etiqueta, el valor y el porcentaje de cada porción de forma permanente. Si la escribes de todos modos dentro de un donut, no pasa nada: simplemente no tiene efecto, porque el donut no comparte esa pieza con las marcas cartesianas.

Por la misma razón, un donut no lleva tooltip. Un tooltip existe para leer un valor que la geometría no te da, y aquí la leyenda ya muestra las tres cifras a la vez. Si escribes chart.tooltip dentro de un donut, tampoco se pinta. Y si necesitas leer las cifras una a una en vez de comparar superficies, el gráfico que hace falta no es un donut: es una barra.

Highlight

Pasa el ratón sobre un arco: con highlight activado (el default), se enciende también su fila de la leyenda, y al revés. Es CSS puro, con :has() sobre un data-slice común — ni una línea de JavaScript.

highlight (default)

  • Producto 4.200 41.6 %
  • Marketing 2.800 27.7 %
  • Operaciones 1.900 18.8 %
  • Soporte 1.200 11.9 %
Presupuesto, con highlight
Categoría
Producto
Marketing
Operaciones
Soporte

highlight=false

  • Producto 4.200 41.6 %
  • Marketing 2.800 27.7 %
  • Operaciones 1.900 18.8 %
  • Soporte 1.200 11.9 %
Presupuesto, sin highlight
Categoría
Producto
Marketing
Operaciones
Soporte

Hay una regla de CSS por índice, hasta la porción 12. Por encima de esa cifra el resaltado simplemente no se activa: un donut con más de doce porciones ya no se lee bien, y conviene agrupar la cola en «Otros».

{{-- Con highlight (el default) --}}
<x-kore::chart :data="$presupuesto" x="categoria">
    <x-kore::chart.donut y="monto" />
</x-kore::chart>

{{-- Sin highlight --}}
<x-kore::chart :data="$presupuesto" x="categoria">
    <x-kore::chart.donut y="monto" :highlight="false" />
</x-kore::chart>
{{-- Con highlight (el default) --}}
<x-kore::chart :data="$presupuesto" x="categoria">
    <x-kore::chart.donut y="monto" />
</x-kore::chart>

{{-- Sin highlight --}}
<x-kore::chart :data="$presupuesto" x="categoria">
    <x-kore::chart.donut y="monto" :highlight="false" />
</x-kore::chart>

Props

Prop Tipo Default Descripción
y string — La clave del valor
label string null El nombre de la serie
inner float 0.6 El agujero, como proporción del radio. 0 es una tarta
pad float 1 Separación entre porciones, en grados
highlight bool config(true) Al posarte sobre un arco, enciende también su fila de la leyenda. Es CSS puro
show bool true show=false la oculta pero le reserva su color de la paleta

Nota: los valores negativos, INF y NAN se ignoran al calcular las porciones: una porción no puede medir menos que nada. Un donut tampoco comparte gráfico con marcas cartesianas — mezclarlo con bar, line o area lanza una excepción.

Cargando