K
KoreUI

Chart Bar

Chart

Barras. Con el mismo stack se apilan; sin stack, se agrupan una al lado de otra.

Barras simples

Una sola serie. La longitud de la barra es el valor, así que el eje siempre incluye el cero.

Ingresos por mes
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">
    <x-kore::chart.bar y="ingresos" label="Ingresos" />

    <x-kore::chart.axis-y :ticks="5" format="currency" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>
<x-kore::chart :data="$ventas" x="mes">
    <x-kore::chart.bar y="ingresos" label="Ingresos" />

    <x-kore::chart.axis-y :ticks="5" format="currency" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

Agrupadas

Varias marcas bar sin stack: cada una se reparte el ancho de la banda y se dibuja al lado de la anterior.

Ingresos y gastos por mes
Categoría Ingresos Gastos
Ene 1,2k 800
Feb 3,2k 1,5k
Mar 2,5k 1,1k
Abr 4,9k 2,2k
May 4,3k 1,9k
Jun 6,1k 2,6k 
<x-kore::chart :data="$ventas" x="mes">
    <x-kore::chart.bar y="ingresos" label="Ingresos" />
    <x-kore::chart.bar y="gastos"   label="Gastos" />

    <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="$ventas" x="mes">
    <x-kore::chart.bar y="ingresos" label="Ingresos" />
    <x-kore::chart.bar y="gastos"   label="Gastos" />

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

Apiladas

Las barras con el mismo stack se acumulan, y el dominio del eje se calcula sobre las sumas. Sólo se redondea la punta de cada columna: en marzo falta «Móvil», así que la punta pasa a ser «Tienda».

Ventas por canal
Categoría Web Tienda Móvil
Ene 600 400 240
Feb 1,4k 900 880
Mar 1,1k 700 —
Abr 2,2k 1,4k 1,3k
May 1,9k 1,3k 1,1k
Jun 2,9k 1,7k 1,5k

No se pueden apilar valores positivos y negativos en la misma pila: el componente lanza una excepción en vez de dibujar algo que se lee mal.

<x-kore::chart :data="$canales" x="mes">
    <x-kore::chart.bar y="web"    label="Web"    stack="canal" />
    <x-kore::chart.bar y="tienda" label="Tienda" stack="canal" />
    <x-kore::chart.bar y="movil"  label="Móvil"  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="$canales" x="mes">
    <x-kore::chart.bar y="web"    label="Web"    stack="canal" />
    <x-kore::chart.bar y="tienda" label="Tienda" stack="canal" />
    <x-kore::chart.bar y="movil"  label="Móvil"  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>

Valores negativos

Las barras crecen desde el cero, hacia arriba o hacia abajo. La punta se redondea hacia donde crece la barra.

Resultado mensual
Categoría Resultado
Ene 1.200 €
Feb -800 €
Mar 400 €
Abr -1.500 €
May 2.100 €
Jun 900 € 
<x-kore::chart :data="$balance" x="mes">
    <x-kore::chart.bar y="resultado" label="Resultado" />

    <x-kore::chart.axis-y :ticks="5" format="currency" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>
<x-kore::chart :data="$balance" x="mes">
    <x-kore::chart.bar y="resultado" label="Resultado" />

    <x-kore::chart.axis-y :ticks="5" format="currency" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

Horizontales

orientation="horizontal" en el contenedor (no en la barra) transpone el dibujo: la categoría baja por la izquierda y el valor corre por abajo. El dato no cambia, sólo gira la presentación. Su razón de ser: las etiquetas de categoría largas caben sin rotar.

Tickets por departamento
Categoría tickets
Atención al cliente 1.240
Ingeniería de plataforma 890
Ventas y desarrollo de negocio 610
Marketing de producto 430
Recursos humanos 220 
<x-kore::chart :data="$departamentos" x="depto" orientation="horizontal" height="14rem">
    <x-kore::chart.bar y="tickets" />

    <x-kore::chart.axis-y />
    <x-kore::chart.axis-x />
</x-kore::chart>
<x-kore::chart :data="$departamentos" x="depto" orientation="horizontal" height="14rem">
    <x-kore::chart.bar y="tickets" />

    <x-kore::chart.axis-y />
    <x-kore::chart.axis-x />
</x-kore::chart>

Horizontales agrupadas y apiladas

Funciona igual con varias series: agrupadas reparten el alto de la banda, apiladas se acumulan a lo ancho. Sólo el borde derecho se redondea (o el izquierdo, si la barra es negativa).

Agrupadas

Ventas por región y trimestre, agrupadas
Categoría Q1 Q2
Norte 120 180
Centro 200 150
Sur 90 210
Levante 160 140

Apiladas

Ventas apiladas por región
Categoría Q1 Q2
Norte 120 180
Centro 200 150
Sur 90 210
Levante 160 140

Horizontal sólo transpone barras: no lleva tooltip flotante ni zoom, y el resalte al pasar el ratón es CSS puro. El eje del valor también pide menos ticks que en vertical, porque tumbados se pisan antes.

{{-- Agrupadas --}}
<x-kore::chart :data="$regiones" x="region" orientation="horizontal" height="12rem">
    <x-kore::chart.legend />
    <x-kore::chart.bar y="q1" label="Q1" />
    <x-kore::chart.bar y="q2" label="Q2" />
</x-kore::chart>

{{-- Apiladas --}}
<x-kore::chart :data="$regiones" x="region" orientation="horizontal" height="12rem">
    <x-kore::chart.legend />
    <x-kore::chart.bar y="q1" label="Q1" stack="ventas" />
    <x-kore::chart.bar y="q2" label="Q2" stack="ventas" />
</x-kore::chart>
{{-- Agrupadas --}}
<x-kore::chart :data="$regiones" x="region" orientation="horizontal" height="12rem">
    <x-kore::chart.legend />
    <x-kore::chart.bar y="q1" label="Q1" />
    <x-kore::chart.bar y="q2" label="Q2" />
</x-kore::chart>

{{-- Apiladas --}}
<x-kore::chart :data="$regiones" x="region" orientation="horizontal" height="12rem">
    <x-kore::chart.legend />
    <x-kore::chart.bar y="q1" label="Q1" stack="ventas" />
    <x-kore::chart.bar y="q2" label="Q2" stack="ventas" />
</x-kore::chart>

Detalles de diseño

Tres decisiones del componente que conviene conocer.

  • La barra siempre llega al cero. La longitud es el valor: una barra que empezara en 40 mentiría sobre la proporción entre las barras.
  • Sólo se redondea la punta. En una pila, sólo el último tramo con valor lleva el redondeo; si a un mes le falta la serie de arriba, la punta pasa a ser la de debajo. Un cero nunca es la punta.
  • Las barras son HTML, no SVG. Un rect con esquinas redondeadas dentro del SVG se vería elíptico al estirarse; un div con border-radius se clampa solo y tiene hover nativo.

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 (destructive, success…) o un color CSS. Por defecto, el de la paleta
stack string null Las barras con el mismo nombre de pila se acumulan
show bool true show=false la oculta pero le reserva su color de la paleta

Nota: orientation="horizontal" es una prop del contenedor chart, no de chart.bar. Transpone toda la geometría; si intentas mezclarla con una línea o un área, el componente lanza una excepción.

Cargando