# Barra apilada

Muestra las partes de un todo en una sola barra, con una leyenda que dice cada nombre y cada cifra en texto.

### Problemas conocidos
No se conocen problemas.

### Copiar el marcado
Una hoja de estilos de `@luz-ds/catalog`: enlaza `components/stacked-bar.css` después de `luz.css`.

Stacked bar markup
```html
<figure class="luz-stacked-bar">
  <figcaption>Parcels by status, this week</figcaption>
  <div class="luz-stacked-bar__bar" aria-hidden="true">
    <span class="luz-stacked-bar__part" style="--v: 62"></span>
    <span class="luz-stacked-bar__part" style="--v: 28"></span>
    <span class="luz-stacked-bar__part" style="--v: 10"></span>
  </div>
  <ul class="luz-stacked-bar__legend">
    <li class="luz-stacked-bar__item"><span class="luz-stacked-bar__name">Delivered</span> <span class="luz-stacked-bar__figure">62 %</span></li>
    <li class="luz-stacked-bar__item"><span class="luz-stacked-bar__name">In transit</span> <span class="luz-stacked-bar__figure">28 %</span></li>
    <li class="luz-stacked-bar__item"><span class="luz-stacked-bar__name">Delayed</span> <span class="luz-stacked-bar__figure">10 %</span></li>
  </ul>
</figure>
```

### Variantes y opciones
- `--v`: En cada parte, su peso: la barra siempre llena su ancho y cada parte toma su `--v` de la suma, de modo que 62, 21 y 9 sirven igual que .62, .21 y .09
- `--luz-stacked-bar-color`: Otro color de gráfico para una parte y su elemento, como `var(--luz-chart-4)`
- `--luz-stacked-bar-h`: La altura de la barra

### Cómo funciona
Una figura con dos listas de las mismas partes en el mismo orden. La leyenda son los datos: un nombre y una cifra en texto por parte, con una muestra de su color. La barra es un dibujo de ella, una fila de partes que se reparten el ancho en proporción a su `--v`, con la superficie asomando por un hueco fino entre ellas.

Las series toman de `--luz-chart-1` a `--luz-chart-6` en el orden del marcado, así que hasta seis partes conservan su propio color. Pon la mayor primero y agrupa las más pequeñas como «Otros». El `style` en línea solo da `--v`. Con un `style-src` estricto, ponlo en una regla propia.

### Sin JavaScript
No lo necesita. Sin la hoja de estilos la figura se lee como su título y la leyenda, una lista de nombres y cifras; la barra queda vacía.

### Teclado y ARIA
Nada recibe el foco. El título y la leyenda son texto: oculta la barra con `aria-hidden="true"`, como en el ejemplo.

En colores forzados las partes y las muestras de la leyenda llevan el mismo número, así que se empareja cada parte con su elemento por el número. Puede que el número no quepa en una parte muy estrecha; la leyenda sigue el mismo orden que la barra.

### Cuándo usarlo
Úsala para mostrar cómo se reparte un todo, cuando las partes suman un total: estados, orígenes, partes de un presupuesto.

### Cuándo no usarlo
No la uses para comparar muchos valores (usa una [lista de barras](https://nandovejer.github.io/luz/es/docs/catalog/bar-list/) o un [gráfico de columnas](https://nandovejer.github.io/luz/es/docs/catalog/column-chart/)), para más de seis partes ni para una sola (usa un [medidor](https://nandovejer.github.io/luz/es/docs/components/meter/)).