Gráfico de anillo
Reparto de un total en pocas partes.
Definición
El gráfico de anillo reparte un total en porciones de un círculo con hueco, y deja el centro para el total. Se lee el peso de cada parte por su arco y el todo de un vistazo. Sirve para cuotas de mercado, repartos de presupuesto o composición de una cartera con pocas partes.
- Datos
- category · value
- Buena para
- Enseñar cómo se reparte un total en pocas partes cuando el total también importa.
- Evítala cuando
- Cuando hay más de ocho porciones o partes de tamaño parecido: los arcos dejan de distinguirse.
- Se lee bien
- Entre 2 y 8 elementos; dibuja hasta 3000
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
category · opcional | string | El nombre de la porción. Sin ella el chart devuelve una serie vacía. |
value · opcional | number | El tamaño de la porción. El porcentaje NO se lee de la fila: se calcula sobre la suma de lo que llegue, así que una fila de más cambia todos los porcentajes. |
Tamaños
Recompuesta, no encogida
El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.
Cuándo usarla
Tres preguntas antes de elegirla
¿Son pocas partes, ocho como mucho?
Con más porciones los arcos dejan de compararse; unas barras horizontales ordenadas aguantan muchas categorías.
Sí: quédate con gráfico de anillo
No: usa Gráfico de barras horizontales
¿Basta con una idea aproximada de cada parte?
Si el lector tiene que contar la proporción en vez de estimarla, un waffle la reparte en casillas.
Sí: quédate con gráfico de anillo
No: usa Gráfico de waffle
¿Es un único reparto?
Si comparas el mismo reparto en varios grupos o años, unas barras apiladas los alinean.
Sí: quédate con gráfico de anillo
No: usa Barras apiladas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('donut');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿De dónde sale el porcentaje de cada porción?
Se calcula sobre la suma de las filas que llegan; no se lee de la fila. Una fila de más cambia todos los porcentajes.
¿Para qué sirve el hueco?
Es donde vive el total: el anillo dice el reparto y el centro, cuánto suma.
¿Qué hace si faltan datos?
Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.
¿Cómo se ve en el móvil?
El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «partes de un todo»
Anidamiento conceptualconceptos contenidos unos dentro de otros
Matriz de puntosresultados de casos individuales en cuadrícula
Descomposición DuPontdescomponer el ROE en sus factores
Gráfico de carámbanosjerarquía y pesos en bloques por niveles
Árbol con sangríasjerarquía detallada con su valor
Retornos de un LBOrentabilidad según escenarios de salida