# Breakdown · MIAN

How a total splits into parts: one stacked bar and a list with each part’s value and share.

- Id: `breakdown` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/breakdown
- Use for: stacked bar with legend, share by category, traffic sources, sales by channel, budget split.
- Alternatives: chart, funnel.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-breakdown`: The bar and its list.
- `mn-breakdown-bar`: The stacked bar. Each <i> takes --v, its share.
- `mn-breakdown-list`: One row per part, in the same order: label, value (<b>), share (<small>). The swatch is drawn for you.

## Accessibility

- The bar is role="img" with an aria-label listing the shares; the list is the accessible version of the same data.
- Keep the list and the bar in the same order so position, not only colour, links them.
- Four series colours are distinct; a fifth and later parts share a neutral: group small parts as “Other”.

## Examples

### Traffic by source

```html
<div class="mn-breakdown" style="max-width:26rem">
  <div class="mn-breakdown-bar" role="img" aria-label="Search 46%, direct 28%, referrals 17%, email 9%"><i style="--v:46"></i><i style="--v:28"></i><i style="--v:17"></i><i style="--v:9"></i></div>
  <ul class="mn-breakdown-list"><li><span>Search</span><b>18,420</b><small>46%</small></li><li><span>Direct</span><b>11,210</b><small>28%</small></li><li><span>Referrals</span><b>6,810</b><small>17%</small></li><li><span>Email</span><b>3,600</b><small>9%</small></li></ul>
</div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/breakdown/source