Breakdown
How a total splits into parts: one stacked bar and a list with each part’s value and share.
Traffic by source
- Search18,42046%
- Direct11,21028%
- Referrals6,81017%
- Email3,6009%
<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>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/breakdown.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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”.