Chart
Bar, horizontal bar, line/area and donut charts from plain markup. Each noodle draws them in its own style.
Bars
<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
- This year
- Last year
<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
<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
2,350customers
- Pro
- Team
- Free
- Enterprise
<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>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/chart.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-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.