# Stacked bar

Shows the shares of a whole in one bar, with a legend that says each name and figure in text.

### Known issues
None known.

### Copy the markup
A stylesheet of `@luz-ds/catalog`: link `components/stacked-bar.css` after `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>
```

### Variants and options
- `--v`: On each part, its weight: the bar always fills its width and a part takes its `--v` of the sum, so 62, 21 and 9 work as well as .62, .21 and .09
- `--luz-stacked-bar-color`: Another chart colour for a part and its item, such as `var(--luz-chart-4)`
- `--luz-stacked-bar-h`: The height of the bar

### How it works
A figure with two lists of the same shares in the same order. The legend is the data: a name and a figure in text for each share, with a swatch in its colour. The bar is a picture of it, a row of parts that take the width in proportion to their `--v`, with the surface showing through a thin gap between them.

The series take `--luz-chart-1` to `--luz-chart-6` in the order of the markup, so up to six shares keep their own colour. Put the largest first and group the smallest as “Other”. The inline `style` sets only `--v`. With a strict `style-src`, set it in a rule of your own.

### Without JavaScript
It needs none. Without the stylesheet the figure reads as its caption and the legend, a list of names and figures; the bar is empty.

### Keyboard and ARIA
Nothing takes focus. The caption and the legend are text: hide the bar with `aria-hidden="true"`, as in the example.

In forced colors the parts and the swatches of the legend carry the same number, so a part is matched to its item by number. The number may not fit in a very narrow part; the legend is in the same order as the bar.

### When to use
Use it to show how a whole is split, when the parts add up to one total: statuses, sources, shares of a budget.

### When not to use
Do not use it to compare many values (use a [bar list](https://nandovejer.github.io/luz/docs/catalog/bar-list/) or a [column chart](https://nandovejer.github.io/luz/docs/catalog/column-chart/)), for more than six shares, or for one share (use a [meter](https://nandovejer.github.io/luz/docs/components/meter/)).