# Chart · MIAN

Bar, horizontal bar, line/area and donut charts from plain markup. Each noodle draws them in its own style.

- Id: `chart` · Category: Data display · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/chart
- Use for: bar chart, line chart, donut chart, graph, analytics chart, revenue over time.

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">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-chart`: A <figure> wrapper with an optional <figcaption>.
- `mn-chart-bars · mn-bar`: Column chart. Set --max on the container and --v on each bar; data-value shows on hover and with the arrow keys; mn-hl highlights.
- `mn-chart-h`: Horizontal bars.
- `svg.mn-chart-line[data-values]`: Line and area chart drawn by mian.js. Add data-values-2 for a second series. Hover, touch or arrow keys show a guide line and the values at that point.
- `data-labels · data-names · data-unit`: On the line chart: the x labels (comma-separated), the series names, and a unit for values (“€” gives €12, “k” gives 12k, “ km” gives 12 km).
- `mn-donut · --s1…--s4`: Donut. Segment sizes in percent.
- `mn-legend`: Legend list; colours follow the series order.
- `--mn-series-1…4`: Series colours. Default: primary, accent, success, warning.

## Accessibility

- Charts are images: give the figure role="img" and an aria-label that states the key numbers, or provide the data in a table next to it.
- Colour is never the only differentiator in the legend: order and labels match the series.

## Examples

### Bars

```html
<figure class="mn-chart" role="img" aria-label="Revenue by month, peaking in December at 94">
  <div class="mn-chart-bars" style="--max:100">
    <div class="mn-bar" style="--v:38" data-value="38"><span>Jan</span></div>
    <div class="mn-bar" style="--v:52" data-value="52"><span>Feb</span></div>
    <div class="mn-bar" style="--v:44" data-value="44"><span>Mar</span></div>
    <div class="mn-bar" style="--v:66" data-value="66"><span>Apr</span></div>
    <div class="mn-bar" style="--v:58" data-value="58"><span>May</span></div>
    <div class="mn-bar" style="--v:74" data-value="74"><span>Jun</span></div>
    <div class="mn-bar" style="--v:62" data-value="62"><span>Jul</span></div>
    <div class="mn-bar" style="--v:81" data-value="81"><span>Aug</span></div>
    <div class="mn-bar" style="--v:70" data-value="70"><span>Sep</span></div>
    <div class="mn-bar" style="--v:88" data-value="88"><span>Oct</span></div>
    <div class="mn-bar" style="--v:76" data-value="76"><span>Nov</span></div>
    <div class="mn-bar mn-hl" style="--v:94" data-value="94"><span>Dec</span></div>
  </div>
</figure>
```

### Line and area

```html
<figure class="mn-chart" role="img" aria-label="Visitors this year versus last year">
  <svg class="mn-chart-line" data-values="12,18,15,24,21,30,28,36,33,41,38,47" data-values-2="10,12,14,13,17,19,18,22,24,23,27,29" data-labels="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec" data-names="This year,Last year" data-unit="k"></svg>
  <ul class="mn-legend"><li>This year</li><li>Last year</li></ul>
</figure>
```

### Horizontal bars

```html
<figure class="mn-chart" role="img" aria-label="Traffic by source">
  <div class="mn-chart-bars mn-chart-h" style="--max:60">
    <div class="mn-bar mn-hl" style="--v:52" data-value="52%"><span>Search</span></div>
    <div class="mn-bar" style="--v:24" data-value="24%"><span>Direct</span></div>
    <div class="mn-bar" style="--v:14" data-value="14%"><span>Social</span></div>
    <div class="mn-bar" style="--v:10" data-value="10%"><span>Email</span></div>
  </div>
</figure>
```

### Donut

```html
<figure class="mn-chart" style="justify-items:center">
  <div class="mn-donut-wrap" role="img" aria-label="Plan mix: Pro 45%, Team 30%, Free 15%, Enterprise 10%">
    <div class="mn-donut" style="--s1:45;--s2:30;--s3:15;--s4:10"></div>
    <div class="mn-donut-label">2,350<small>customers</small></div>
  </div>
  <ul class="mn-legend"><li>Pro</li><li>Team</li><li>Free</li><li>Enterprise</li></ul>
</figure>
```

## Source

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