Un gráfico circular divide un círculo en sectores para mostrar cómo se reparte un total entre varias categorías. Es útil para comunicar proporciones sencillas cuando las partes suman el 100 %.
El gráfico circular, también llamado gráfico de sectores o de torta, representa un total mediante un círculo completo. Cada categoría ocupa un sector cuyo tamaño es proporcional a su frecuencia.
La idea central es que el círculo representa el total: 360° equivalen al 100 %. Por eso cada sector permite relacionar una parte con el conjunto.
Es apropiado cuando interesa responder qué proporción del total corresponde a cada categoría y hay pocas categorías fáciles de distinguir.
Si se necesita comparar muchas categorías o valores muy parecidos, un gráfico de barras suele ser más preciso.
Analizamos 30 sesiones de una aplicación según el navegador utilizado:
| Navegador | Frecuencia | Porcentaje | Ángulo |
|---|---|---|---|
| Chrome | 12 | 40,00 % | 144° |
| Firefox | 8 | 26,67 % | 96° |
| Safari | 6 | 20,00 % | 72° |
| Edge | 4 | 13,33 % | 48° |
| Total | 30 | 100,00 % | 360° |
Primero se cuenta cuántas observaciones pertenecen a cada categoría. Luego se divide cada frecuencia por el total:
Para Chrome: 12 / 30 = 0,40 = 40 %. La suma de las proporciones debe ser 1 y la suma de los porcentajes debe ser 100 %, salvo pequeñas diferencias por redondeo.
El área visual del sector se obtiene convirtiendo la proporción en grados:
La frecuencia no se convierte directamente en grados: siempre se compara con el total. Por eso el mismo conteo puede producir sectores diferentes si cambia el tamaño de la muestra.
En el ejemplo, Chrome es la categoría más frecuente, con el 40 % de las sesiones. Firefox representa algo más de una cuarta parte, Safari una quinta parte y Edge la proporción menor.
El gráfico permite ver rápidamente la relación parte-total, pero no muestra por sí mismo el orden de las categorías ni una evolución temporal.
Selecciona otra distribución o cambia la forma de mostrar el total. El resumen textual acompaña al gráfico para que la información no dependa únicamente del color.
Una etiqueta puede mostrar el nombre, el porcentaje o ambos. Cuando los sectores son pequeños, conviene trasladar los nombres a una leyenda y conservar el porcentaje junto al sector.
Los colores deben ser suficientemente diferentes y conservar el mismo significado en todo el informe. Nunca se debe comunicar una categoría solo por color.
En categorías sin orden natural, ordenar los sectores de mayor a menor facilita encontrar las partes principales. También puede comenzarse en la posición de las 12 en punto y avanzar siempre en el mismo sentido.
Si las categorías tienen un orden propio, como niveles bajo, medio y alto, se puede respetar ese orden aunque no coincida con la frecuencia.
| Característica | Circular | Barras |
|---|---|---|
| Pregunta principal | ¿Qué parte del total representa cada categoría? | ¿Cómo se comparan los valores? |
| Escala | Ángulos o áreas relativas. | Eje con una escala explícita. |
| Muchas categorías | Se vuelve difícil de leer. | Admite más categorías. |
| Valores similares | Cuesta distinguir los ángulos. | Las alturas se comparan mejor. |
El gráfico circular comunica composición; el de barras suele ser mejor para comparar con precisión.
Un sector de 3 % ocupa solo 10,8°. Si existen muchas partes pequeñas, la leyenda se satura y las diferencias se vuelven difíciles de percibir.
Una solución es agrupar categorías poco frecuentes en “Otros”, siempre que esa agrupación sea significativa y se documente qué contiene. No debe ocultarse una categoría importante dentro de ese grupo.
Para que el gráfico sea válido, cada observación debe pertenecer a una única categoría y todas las categorías relevantes deben estar incluidas.
Si una sesión puede usar varios navegadores, las frecuencias dejan de ser partes exclusivas de un único total. En ese caso corresponde otro tipo de visualización, o definir claramente qué representa el denominador.
Comparar círculos de distinto tamaño suele inducir errores: el área total del círculo llama la atención y dificulta comparar sectores. Para comparar grupos, es preferible:
Un gráfico de anillo es un gráfico circular con el centro vacío. Conserva la relación angular entre las categorías y puede reservar el centro para mostrar el total, un indicador o un título breve.
El agujero no agrega información estadística: es una decisión de diseño. Si se usa, las etiquetas y la leyenda deben seguir haciendo explícitos los valores.
En un canvas, cada sector se dibuja entre dos ángulos. El ángulo final se acumula a partir del ángulo inicial:
const datos = [
{ nombre: 'Chrome', valor: 12, color: '#e76f51' },
{ nombre: 'Firefox', valor: 8, color: '#2a9d8f' },
{ nombre: 'Safari', valor: 6, color: '#457b9d' },
{ nombre: 'Edge', valor: 4, color: '#f4a261' }
];
const total = datos.reduce((suma, dato) => suma + dato.valor, 0);
let inicio = -Math.PI / 2;
const sectores = datos.map(dato => ({
nombre: dato.nombre,
angulo: dato.valor / total * 360
}));
console.log('Ángulos de los sectores:', sectores);
// El dibujo se realiza solo cuando existe un canvas en la página.
if (typeof document !== 'undefined') {
const canvas = document.getElementById('canvasCircularCodigo');
const contexto = canvas.getContext('2d');
const centroX = 270;
const centroY = 245;
const radio = 150;
datos.forEach(dato => {
const angulo = dato.valor / total * Math.PI * 2;
contexto.beginPath();
contexto.moveTo(centroX, centroY);
contexto.arc(centroX, centroY, radio, inicio, inicio + angulo);
contexto.closePath();
contexto.fillStyle = dato.color;
contexto.fill();
contexto.strokeStyle = '#fffdfb';
contexto.lineWidth = 2;
contexto.stroke();
inicio += angulo;
});
}El mismo cálculo sirve para mostrar porcentajes, construir una leyenda y generar una descripción accesible del gráfico.
El contenido debe incluir una tabla o resumen con categorías, frecuencias y porcentajes. El atributo aria-label puede aportar una síntesis, pero no reemplaza una tabla detallada.
Todos los sectores deben partir del mismo centro y representar ángulos proporcionales. No conviene separar, inclinar o agrandar una porción para exagerar su importancia sin explicarlo.
El gráfico circular transforma una tabla de frecuencias en una composición visual donde cada sector muestra la participación de una categoría en el total. Su fuerza está en comunicar proporciones simples de manera inmediata.
La elección del gráfico debe depender de la pregunta: si se busca composición y hay pocas partes, el circular puede ser adecuado; si se necesita comparar muchas magnitudes, un gráfico de barras ofrece una lectura más precisa.
En el próximo tema estudiaremos los diagramas de caja (Box Plot).