K
KoreUI

Ejes y rejilla

Chart

Cuántos ticks salen y cómo se escriben los números («axis-y»); de qué están hechas las categorías del eje X y la rejilla de fondo («axis-x» y la prop «grid» del gráfico). Elegir mal la escala del eje X cambia lo que el gráfico dice.

Uso básico

Un eje Y con 5 ticks formateados en euros, y un eje X de categorías: band es lo que sale por defecto cuando el dato no trae fechas.

Ingresos mensuales
Categoría Ingresos
Ene 1.240 €
Feb 3.180 €
Mar 2.470 €
Abr 4.910 €
May 4.300 €
Jun 6.120 € 
<x-kore::chart :data="$ventas" x="mes" aria-label="Ingresos mensuales">
    <x-kore::chart.line y="ingresos" label="Ingresos" curve="monotone" />
    <x-kore::chart.axis-y :ticks="5" format="currency" />
    <x-kore::chart.axis-x />
</x-kore::chart>
<x-kore::chart :data="$ventas" x="mes" aria-label="Ingresos mensuales">
    <x-kore::chart.line y="ingresos" label="Ingresos" curve="monotone" />
    <x-kore::chart.axis-y :ticks="5" format="currency" />
    <x-kore::chart.axis-x />
</x-kore::chart>

Formato del eje Y

format acepta number (el default), currency, percent y compact. El número que hay detrás no cambia: solo cómo se escribe.

format="number" (default)

Ingresos, formato número
Categoría ingresos
Ene 1.240
Feb 3.180
Mar 2.470
Abr 4.910
May 4.300
Jun 6.120

format="currency"

Ingresos, formato moneda
Categoría ingresos
Ene 1.240 €
Feb 3.180 €
Mar 2.470 €
Abr 4.910 €
May 4.300 €
Jun 6.120 €

format="percent"

Tasa de conversión, formato porcentaje
Categoría tasa
Ene 12,4 %
Feb 18,1 %
Mar 15,7 %
Abr 22,3 %

format="compact"

Visitas, formato compacto
Categoría total
Ene 128k
Feb 184k
Mar 157k
Abr 203k 
<x-kore::chart.axis-y format="number" />
<x-kore::chart.axis-y format="currency" />
<x-kore::chart.axis-y format="percent" />
<x-kore::chart.axis-y format="compact" />
<x-kore::chart.axis-y format="number" />
<x-kore::chart.axis-y format="currency" />
<x-kore::chart.axis-y format="percent" />
<x-kore::chart.axis-y format="compact" />

Dominio fijo con min y max

Sin min/max, el dominio se deduce del dato y se reajusta cada vez que cambian los valores. Con ellos fijo, el rango queda clavado — imprescindible en un gráfico que se actualiza solo: un eje que se reescala cada dos segundos porque el dato subió un punto es ilegible, porque lo que parece moverse es el eje, no la línea.

Autoescala (sin min/max)

Tasa de conversión con autoescala
Categoría Conversión
Ene 12,4 %
Feb 18,1 %
Mar 15,7 %
Abr 22,3 %

Dominio fijo (min=0 max=100)

Tasa de conversión con dominio fijo de 0 a 100
Categoría Conversión
Ene 12,4 %
Feb 18,1 %
Mar 15,7 %
Abr 22,3 %

Contrato, no pista: a diferencia de ticks, min/max no se redondean por debajo de lo que pides. Es el único par de props del eje Y que es una promesa exacta.

{{-- Autoescala: el dominio sale del mínimo y el máximo del dato (aprox. 12-22) --}}
<x-kore::chart.axis-y format="percent" />

{{-- Dominio fijo: un porcentaje va de 0 a 100 y punto --}}
<x-kore::chart.axis-y format="percent" :min="0" :max="100" />
{{-- Autoescala: el dominio sale del mínimo y el máximo del dato (aprox. 12-22) --}}
<x-kore::chart.axis-y format="percent" />

{{-- Dominio fijo: un porcentaje va de 0 a 100 y punto --}}
<x-kore::chart.axis-y format="percent" :min="0" :max="100" />

Categorías y números en el eje X

La misma serie, con la misma columna X (0, 5, 12, 20, 33). A la izquierda, band (el default): los cinco puntos quedan igual de separados, aunque sus valores no lo estén. A la derecha, scale="linear": el hueco entre 20 y 33 se ve más ancho que el hueco entre 5 y 12, porque lo es.

band (default)

Mediciones con eje X de categorías
Categoría Valor
0 12
5 18
12 15
20 27
33 24

scale="linear"

Mediciones con eje X lineal
Categoría Valor
0 12
5 18
12 15
20 27
33 24

auto nunca promociona a linear por su cuenta. Unos años escritos como enteros (2022, 2023, 2024) son categorías, no una recta numérica: colocarlos en una escala lineal le cambiaría el gráfico a quien no ha pedido nada. Si quieres linear, hay que escribirlo.

{{-- band (default): cada fila en su banda, equiespaciada --}}
<x-kore::chart.axis-x />

{{-- linear: cada punto en su posición numérica real --}}
<x-kore::chart.axis-x scale="linear" />
{{-- band (default): cada fila en su banda, equiespaciada --}}
<x-kore::chart.axis-x />

{{-- linear: cada punto en su posición numérica real --}}
<x-kore::chart.axis-x scale="linear" />

La rejilla

La rejilla son las líneas horizontales a la altura de los ticks del eje Y. Es del gráfico entero, no de un eje: se apaga con :grid="false" en <x-kore::chart>, no en axis-y.

grid (default)

Ingresos con rejilla
Categoría Ingresos
Ene 1,2k
Feb 3,2k
Mar 2,5k
Abr 4,9k
May 4,3k
Jun 6,1k

:grid="false"

Ingresos sin rejilla
Categoría Ingresos
Ene 1,2k
Feb 3,2k
Mar 2,5k
Abr 4,9k
May 4,3k
Jun 6,1k 
<x-kore::chart :data="$ventas" x="mes">
    <x-kore::chart.line y="ingresos" curve="monotone" />
    <x-kore::chart.axis-y :ticks="4" format="compact" />
    <x-kore::chart.axis-x />
</x-kore::chart>

{{-- Sin rejilla: la prop vive en el gráfico, no en axis-y --}}
<x-kore::chart :data="$ventas" x="mes" :grid="false">
    <x-kore::chart.line y="ingresos" curve="monotone" />
    <x-kore::chart.axis-y :ticks="4" format="compact" />
    <x-kore::chart.axis-x />
</x-kore::chart>
<x-kore::chart :data="$ventas" x="mes">
    <x-kore::chart.line y="ingresos" curve="monotone" />
    <x-kore::chart.axis-y :ticks="4" format="compact" />
    <x-kore::chart.axis-x />
</x-kore::chart>

{{-- Sin rejilla: la prop vive en el gráfico, no en axis-y --}}
<x-kore::chart :data="$ventas" x="mes" :grid="false">
    <x-kore::chart.line y="ingresos" curve="monotone" />
    <x-kore::chart.axis-y :ticks="4" format="compact" />
    <x-kore::chart.axis-x />
</x-kore::chart>

Cuántos ticks pide cada escala

ticks y max-labels no son lo mismo, y confundirlos sale caro.

En una escala de bandas (categorías), max-labels es un tope: hay N categorías y se pintan como mucho ésas, saltando el resto — nunca rotadas, porque una etiqueta girada no ocupa sitio en el layout y se saldría de la caja.

En una escala continua (fechas o números con linear), ticks es un objetivo: no hay categorías que saltar, hay ticks que elegir. Pedir doce para un rango de una semana da uno cada doce horas, y se pisan unos con otros. Por eso el defecto de una escala continua es más bajo (6 en el eje X, 5 en el eje Y).

ticks es una pista, no un contrato. Si pides 5, te pueden salir 7. Es deliberado: el algoritmo prioriza que los valores sean redondos (1.000, 2.000, 3.000) sobre que sean exactamente los que pediste — un eje que dice «1.224» está roto, y ningún algoritmo puede darte las dos cosas a la vez. Es el mismo algoritmo que usa d3, y da exactamente los mismos ticks.

Nunca dos ejes Y

Una regla de diseño que el componente impone, no sugiere.

Si quieres comparar dos medidas de escalas distintas, son dos gráficos, no uno con dos escalas. Un doble eje Y permite dibujar cualquier correlación con solo elegir bien las dos escalas — por eso es el error más frecuente y más grave de la visualización de datos. <x-kore::chart.axis-y> solo se registra una vez por gráfico: no hay una prop side="right" ni una segunda instancia posible.

Props de axis-y

Prop Tipo Default Descripción
ticks int 5 Cuántos ticks buscar, como PISTA — ver arriba
format string number number, currency, percent o compact
min float|null null Fija el mínimo del dominio. Es un CONTRATO, no se redondea por debajo
max float|null null Fija el máximo del dominio. Igual de estricto que min
show bool true show=false apaga el eje y su canaleta deja de reservar ancho

Props de axis-x

Prop Tipo Default Descripción
scale string auto auto, band (categorías), time (fechas) o linear (números)
timezone string|null la del dato Con qué zona horaria se lee la fecha. Ver la página de eje temporal
ticks int 6 OBJETIVO de ticks en una escala CONTINUA (time o linear). Pista, no contrato
max-labels int 12 TOPE de etiquetas en una escala de BANDAS; el resto se saltan
show bool true show=false apaga el eje y su canaleta deja de reservar ancho
Cargando