Anotación, etiquetado directo y título

Un gráfico sin anotar obliga al lector a descubrir por su cuenta lo que tú ya sabes, y la mayoría no lo hace: mira tres segundos y pasa. El título, las etiquetas junto a los datos y las líneas de referencia son la diferencia entre mostrar unos números y comunicar un hallazgo, y cuestan menos código que el propio gráfico. La parte difícil no es decidir qué anotar: es colocar las etiquetas sin que se pisen.

El título dice el hallazgo

Compara dos títulos del mismo gráfico:

• «Ventas por trimestre, 2025-2026»
• «Las ventas cayeron un 12 % en el tercer trimestre y no se han recuperado»

El primero describe los ejes, que ya están etiquetados. El segundo dice lo que hay que ver. Y no es una cuestión de tono periodístico: es que el lector medio dedica unos segundos al gráfico, y en esos segundos o lee el título o no lee nada.

Las tres reglas del título útil:

Tiene verbo. Si no puedes escribirlo con verbo, no sabes qué muestra el gráfico, y eso es un problema anterior al título.

Es verificable en la imagen. Un título que afirma algo que no se ve en el gráfico es una mentira con soporte gráfico. Si el título dice que la caída es del 12 por ciento, esa cifra tiene que poder leerse.

El subtítulo lleva el contexto. Unidades, periodo, fuente, filtros aplicados. Lo que el lector necesita para saber de qué está hablando el título, en un segundo nivel tipográfico más pequeño.

Y el corolario incómodo: si el gráfico no tiene hallazgo, quizá no debería estar en el panel. Un panel con veinte gráficos donde ninguno afirma nada es un panel que nadie mira.

Etiquetado directo en lugar de leyenda

Una leyenda obliga al lector a un bucle: mirar la línea, buscar su color en la leyenda, leer el nombre, volver a la línea, recordar. Con cuatro series, ese bucle se repite constantemente y consume la atención que debería ir a los datos. Es lo que en teoría de la carga cognitiva se llama atención dividida: dos fuentes de información que hay que integrar mentalmente porque están separadas en el espacio.

La solución es poner el nombre donde ya está mirando el ojo:

// Al final de cada linea, fuera del area de dibujo
for (const serie of series) {
  const ultimo = serie.puntos[serie.puntos.length - 1];
  const t = el('text', {
    x: x(ultimo.fecha) + 6,
    y: y(ultimo.valor),
    dy: '0.32em',
    fill: color(serie.nombre),
    'font-size': 12,
  }, [serie.nombre]);
  capa.appendChild(t);
}

Y el margen derecho se reserva para ellas:

const margen = { arriba: 24, dcha: 96, abajo: 32, izda: 48 };

Ese margen derecho generoso es la marca de un gráfico de líneas bien hecho. El color deja de ser el único canal que identifica la serie, lo que resuelve de paso el problema de accesibilidad de el color en visualización.

Cuándo la leyenda sigue siendo la respuesta: cuando las marcas son demasiado pequeñas para llevar texto al lado (los puntos de una dispersión), cuando hay tantas series que etiquetarlas todas es peor que la leyenda, y cuando el mismo color significa lo mismo en varios gráficos del panel y una leyenda compartida sirve para todos.

En el caso de muchas series, la salida no es la leyenda completa: es etiquetar solo las que importan. Tres líneas con nombre y veinte en gris sin nombre comunican mejor que veintitrés entradas de leyenda.

Las referencias dan sentido a los valores

Un número aislado no es información. «Cuatrocientas incidencias» no significa nada; «cuatrocientas, cuando el objetivo son doscientas» sí. Las referencias son lo que convierte una serie en un juicio, y son cuatro:

La línea de objetivo. Horizontal, discontinua, etiquetada con su valor y su nombre. Con ella, cada punto de la serie se lee como por encima o por debajo, sin cálculo.

La banda de normalidad. Un rectángulo tenue entre dos valores, o entre percentiles históricos. Convierte «está alto» en «está fuera de lo normal», que es una afirmación distinta y mucho más útil.

El periodo anterior. La misma serie desplazada un año, en gris claro y detrás. El lector ve a la vez el valor y si es mejor o peor que lo habitual en esas fechas. Resuelve la estacionalidad sin explicarla.

Los eventos. Una línea vertical con una etiqueta corta donde ocurrió algo que explica un cambio: un despliegue, una campaña, una caída del servicio. Es la anotación que más aprecian los lectores y la que menos se pone, porque requiere tener los eventos en algún sitio. Merece la pena montarlo: convierte un gráfico de métricas en una narración.

function lineaReferencia(g, y, valor, texto) {
  const py = y(valor);
  g.appendChild(el('line', {
    x1: 0, y1: py, x2: ancho, y2: py,
    stroke: '#f9e2af', 'stroke-width': 1.5,
    'stroke-dasharray': '4 4', 'shape-rendering': 'crispEdges',
  }));
  g.appendChild(el('text', {
    x: ancho, y: py, dy: '-0.4em', 'text-anchor': 'end',
    'font-size': 11, fill: '#f9e2af',
  }, [texto]));
}

Una regla sobre la jerarquía visual: las referencias van detrás y más tenues que los datos. Una línea de objetivo más gruesa que la serie compite con ella y el ojo va al sitio equivocado.

Qué quitar

La anotación añade tinta, así que hay que compensar quitándola de otro sitio. Lo que sobra casi siempre:

• La leyenda, si has etiquetado directamente. Tener las dos es redundancia pura.
• El título del eje vertical, si el título del gráfico ya dice la magnitud y las etiquetas llevan la unidad.
• Las etiquetas de valor sobre cada barra, si hay eje. Elige: o eje o etiquetas. Con las dos, cada valor está escrito dos veces.
• Los decimales que nadie necesita. «1.234.567 €» en un eje se lee peor que «1,2 M €», y la precisión que se pierde no la usaba nadie.
• La rejilla, según la tarea, con el criterio que ya se estableció en construir un eje a mano.

function separar(etiquetas, altoEtiqueta = 14, alto, iteraciones = 24) {
  const orden = [...etiquetas].sort((a, b) => a.y - b.y);
  for (let k = 0; k < iteraciones; k++) {
    let movido = false;
    for (let i = 0; i < orden.length - 1; i++) {
      const a = orden[i], b = orden[i + 1];
      const solape = altoEtiqueta - (b.y - a.y);
      if (solape > 0) {
        a.y -= solape / 2;
        b.y += solape / 2;
        movido = true;
      }
    }
    // Devolver al area util lo que se haya salido
    orden[0].y = Math.max(altoEtiqueta / 2, orden[0].y);
    orden[orden.length - 1].y = Math.min(alto - altoEtiqueta / 2, orden[orden.length - 1].y);
    if (!movido) break;
  }
  return orden;
}