K
KoreUI

Chart Area

Chart

El área bajo una línea. A diferencia de line, sí incluye el cero en el eje: es una superficie, y su tamaño se lee como magnitud.

Área simple

El área ya dibuja su propio trazo: no hace falta añadir una marca line encima. Si lo haces, el gráfico tiene dos series sobre los mismos datos y el tooltip enseña la misma cifra dos veces.

Ingresos por mes
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.area y="ingresos" label="Ingresos" curve="monotone" />

    <x-kore::chart.axis-y format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>
<x-kore::chart :data="$ventas" x="mes">
    <x-kore::chart.area y="ingresos" label="Ingresos" curve="monotone" />

    <x-kore::chart.axis-y format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

Superpuestas

Sin stack, las mismas áreas se superponen translúcidas desde el cero. No se lee el total, pero sí se comparan las formas una contra otra: es otra pregunta, no una versión peor de la apilada.

Fuentes de energía superpuestas por mes
Categoría Solar Eólica Hidro
Ene 12 20 30
Feb 18 24 28
Mar 26 30 27
Abr 38 34 26
May 46 37 25
Jun 52 40 24 
<x-kore::chart :data="$energia" x="mes">
    <x-kore::chart.area y="solar"  label="Solar" />
    <x-kore::chart.area y="eolica" label="Eólica" />
    <x-kore::chart.area y="hidro"  label="Hidro" />

    <x-kore::chart.axis-y format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.legend />
    <x-kore::chart.tooltip />
</x-kore::chart>
<x-kore::chart :data="$energia" x="mes">
    <x-kore::chart.area y="solar"  label="Solar" />
    <x-kore::chart.area y="eolica" label="Eólica" />
    <x-kore::chart.area y="hidro"  label="Hidro" />

    <x-kore::chart.axis-y format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.legend />
    <x-kore::chart.tooltip />
</x-kore::chart>

Apiladas

Varias áreas con el mismo stack se apilan: cada banda se apoya en la suma de las de debajo, no en el cero. La silueta de arriba es el total; el grosor de cada franja, su aportación. La primera que declaras es la de abajo.

Tráfico por canal
Categoría Orgánico De pago Social
Ene 46 26 13
Feb 52 28 16
Mar 58 31 19
Abr 65 33 22
May 71 36 25
Jun 78 38 28

Es el mismo stack de las barras, extendido al área. Un null en cualquiera de los dos bordes de una banda la parte en dos; el vacío no se rellena.

<x-kore::chart :data="$trafico" x="mes">
    <x-kore::chart.area y="organico" label="Orgánico" stack="canal" />
    <x-kore::chart.area y="pago"     label="De pago"  stack="canal" />
    <x-kore::chart.area y="social"   label="Social"   stack="canal" />

    <x-kore::chart.axis-y format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.legend />
    <x-kore::chart.tooltip />
</x-kore::chart>
<x-kore::chart :data="$trafico" x="mes">
    <x-kore::chart.area y="organico" label="Orgánico" stack="canal" />
    <x-kore::chart.area y="pago"     label="De pago"  stack="canal" />
    <x-kore::chart.area y="social"   label="Social"   stack="canal" />

    <x-kore::chart.axis-y format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.legend />
    <x-kore::chart.tooltip />
</x-kore::chart>

Por qué el área llega al cero

La diferencia con line no es estética.

Una línea no fuerza el cero porque forzarlo aplastaría la señal contra el techo: lo que importa en una línea es la forma, no la superficie. Un área es distinta: es una superficie, y una superficie se lee por su tamaño. Un área que arrancara en 40 dibujaría una mancha enorme para una variación mínima, así que el eje incluye siempre el cero en cuanto hay una marca area — igual que ocurre con bar.

Props

Prop Tipo Default Descripción
y string — La clave del valor en cada fila
label string null El nombre de la serie
color string null Un token o un color CSS
curve string linear linear, monotone o step
stack string null Las áreas con el mismo nombre se apilan
maxGap string|int null Distancia máxima entre dos puntos antes de que la banda se parta. Atributo max-gap. Sólo en eje continuo
show bool true show=false la oculta pero le reserva su color de la paleta
Cargando