Swift Charts: gráficas declarativas y honestas

Swift Charts no es una biblioteca de gráficos con plantillas: es una implementación de la gramática de gráficos, el mismo marco teórico que sostiene a ggplot2 y Vega. Su tesis es que una visualización se descompone en datos, marcas geométricas y codificaciones que asignan variables a canales visuales —posición, color, tamaño, símbolo—, y que todo lo demás, ejes y leyendas incluidos, se deduce. Trabajar dentro de esa gramática cambia el modo de pensar: dejas de preguntarte qué componente pinta barras y empiezas a preguntarte qué variable merece el canal perceptual más preciso, que es exactamente la pregunta que separa una gráfica correcta de una que engaña.

La gramática de marcas

Un gráfico se declara como una colección de marcas, y cada marca asigna variables de tus datos a canales visuales mediante value:

struct Medicion: Identifiable {
    let id = UUID()
    let dia: Date
    let sensor: String
    let valor: Double
}

Chart(mediciones) { m in
    LineMark(
        x: .value("Dia", m.dia, unit: .day),
        y: .value("Temperatura", m.valor)
    )
    .foregroundStyle(by: .value("Sensor", m.sensor))
    .symbol(by: .value("Sensor", m.sensor))
    .interpolationMethod(.monotone)

    RuleMark(y: .value("Umbral", 30))
        .foregroundStyle(.red.opacity(0.5))
        .lineStyle(StrokeStyle(dash: [4, 4]))
        .annotation(position: .top, alignment: .leading) {
            Text("Umbral critico").font(.caption2)
        }
}

El catálogo cubre barras, líneas, puntos, áreas, reglas, rectángulos y sectores, y todas se pueden superponer en el mismo gráfico porque comparten el mismo sistema de coordenadas. Los modificadores de codificación son la parte sustantiva: foregroundStyle por variable produce series separadas y leyenda automática, position por variable agrupa o apila, y symbol añade una segunda codificación redundante que es lo que hace legible un gráfico multiserie en escala de grises o para quien no distingue rojo y verde.

La elección del canal no es estética. La precisión perceptual del ojo humano ordena los canales de forma estable: posición sobre una escala común es lo más preciso, después longitud, después ángulo y área, y al final color e intensidad. La variable que más importa merece el canal más preciso, y por eso una serie temporal se lee mejor como línea que como sectores, por mucho que estos últimos resulten vistosos.

Escalas, ejes y leyendas

Por defecto Swift Charts infiere el dominio a partir de los datos, y esa inferencia es correcta para explorar pero peligrosa para comunicar: un eje que empieza en el mínimo observado exagera visualmente diferencias pequeñas. Fijar el dominio es una decisión editorial explícita.

Chart(ventas) { v in
    BarMark(x: .value("Mes", v.mes, unit: .month),
            y: .value("Ingresos", v.ingresos))
}
.chartYScale(domain: 0...50_000)
.chartXAxis {
    AxisMarks(values: .stride(by: .month)) { valor in
        AxisGridLine()
        AxisTick()
        AxisValueLabel(format: .dateTime.month(.narrow))
    }
}
.chartYAxis {
    AxisMarks(position: .leading) { valor in
        AxisGridLine()
        AxisValueLabel {
            if let n = valor.as(Double.self) {
                Text(n, format: .number.notation(.compactName))
            }
        }
    }
}
.chartLegend(position: .bottom, alignment: .leading, spacing: 8)

AxisMarks recorre valores del eje y deja construir por separado la línea de rejilla, la marca y la etiqueta, con acceso al valor concreto para formatearlo. La regla de oro es preferir escalas y formatos declarados a cadenas precalculadas, porque el formateo de fechas y números depende del idioma, del calendario y del tamaño disponible, y todo eso lo resuelve el sistema si le dejas.

flowchart LR
A[Datos del dominio] --> B[Marcas geometricas]
B --> C[Codificacion en canales visuales]
C --> D[Escalas y dominios explicitos]
D --> E[Ejes y leyendas derivados]
E --> F[Interaccion y accesibilidad]
style C fill:#a6e3a1,color:#11111b
style D fill:#fab387,color:#11111b

Interacción y desplazamiento

La selección declarativa cubre el caso habitual sin tocar gestos: enlaza el valor seleccionado del eje y dibuja una marca de énfasis a partir de él.

@State private var diaSeleccionado: Date?

Chart(mediciones) { m in
    LineMark(x: .value("Dia", m.dia), y: .value("Valor", m.valor))

    if let d = diaSeleccionado, let punto = medicion(en: d) {
        RuleMark(x: .value("Seleccion", d))
            .foregroundStyle(.secondary)
            .annotation(position: .topTrailing, overflowResolution: .init(x: .fitToPlot)) {
                Text(punto.valor, format: .number.precision(.fractionLength(1)))
                    .padding(6)
                    .background(.regularMaterial, in: .rect(cornerRadius: 8))
            }
    }
}
.chartXSelection(value: $diaSeleccionado)
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 3600 * 24 * 30)

Cuando necesitas control fino —un gesto propio, un cursor que sigue el dedo, una zona rectangular— la vía es chartOverlay, que entrega un proxy capaz de convertir coordenadas de pantalla a valores del dominio y viceversa. Ese proxy es la frontera entre el mundo de píxeles y el mundo de datos, y usarlo evita el error clásico de calcular posiciones a mano y que se descuadren al cambiar el tamaño o el dominio. Para series largas, la combinación de ejes desplazables con un dominio visible acotado mantiene el rendimiento porque solo se rasteriza la ventana visible.

Accesibilidad de los datos

Una gráfica es información, y si esa información solo existe como píxeles queda fuera del alcance de quien no ve la pantalla. Swift Charts está preparado para resolverlo con muy poco código: al anotar cada marca con etiqueta y valor accesibles, el sistema construye automáticamente una representación navegable y, en iOS, un audio graph que sonifica la serie mediante tonos cuya frecuencia sigue el valor.

BarMark(x: .value("Mes", v.mes), y: .value("Ingresos", v.ingresos))
    .accessibilityLabel(v.mes.formatted(.dateTime.month(.wide)))
    .accessibilityValue(v.ingresos.formatted(.currency(code: "EUR")))

Complétalo con dos medidas: una descripción global del gráfico como etiqueta de la vista contenedora, que resuma tendencia y rango en una frase, y una alternativa tabular alcanzable desde la interfaz, porque hay usuarios para los que una tabla ordenada es sencillamente más útil que cualquier visualización. Añade también soporte para tipografía dinámica en las etiquetas de ejes y comprueba que el gráfico sigue siendo legible con el tamaño de texto más grande.