Bars

An <ol data-bars> is a bar chart. Each item carries its height in --s72-v from 0 to 1, its number in data-value and its axis label as the text.

Basic

<ol data-bars aria-label="Commits by day over the last seven days">
  <li style="--s72-v:.56" data-value="9">Sat</li>
  <li style="--s72-v:.13" data-value="2">Sun</li>
  <li style="--s72-v:0" data-value="0">Mon</li>
  <li style="--s72-v:.69" data-value="11">Tue</li>
  <li style="--s72-v:.88" data-value="14">Wed</li>
  <li style="--s72-v:1" data-value="16">Thu</li>
  <li style="--s72-v:.5" data-value="8">Fri</li>
</ol>

The bars grow from nothing to their value over 500 ms, once, when the chart first reaches the screen.

Notes

• s72.js adds data-shown to the list when it scrolls into view; the CSS holds every bar at zero height until then.
• --s72-bars-h sets the height of the plot, 8rem by default; set it on the list to change one chart.
• The number above each bar is a ::after reading data-value, so it is never out of step with the bar.
• Under prefers-reduced-motion: reduce the bars are drawn at their final height at once.