fin1te/dsv1.0.0
  1. ds
  2. Patterns
  3. Charts

Charts

How the stats page draws numbers.

The stats page draws every chart with HTML and CSS: bars are divs sized by a custom property, dots are scaled circles. No charting library, nothing to load, and the colours come from the tokens so both themes work.

work personal
MonWedFriSun
Show code
<div class="legend-row">
  <span><i style="background:var(--s-work)"></i>work</span>
  <span><i style="background:var(--s-personal)"></i>personal</span>
</div>
<div class="wk">
  <div class="b" title="Mon"><i class="w" style="--h:0.62"></i><i class="p" style="--h:0.18"></i></div>
  <div class="b" title="Tue"><i class="w" style="--h:0.9"></i><i class="p" style="--h:0.22"></i></div>
  <div class="b" title="Wed"><i class="w" style="--h:0.84"></i><i class="p" style="--h:0.3"></i></div>
  <div class="b" title="Thu"><i class="w" style="--h:0.8"></i><i class="p" style="--h:0.2"></i></div>
  <div class="b" title="Fri"><i class="w" style="--h:0.66"></i><i class="p" style="--h:0.35"></i></div>
  <div class="b" title="Sat"><i class="w" style="--h:0.2"></i><i class="p" style="--h:0.55"></i></div>
  <div class="b" title="Sun"><i class="w" style="--h:0.12"></i><i class="p" style="--h:0.48"></i></div>
</div>
<div class="axis"><span>Mon</span><span>Wed</span><span>Fri</span><span>Sun</span></div>
Do
  • Two series at most: --s-work and --s-personal. They are checked as a pair.
  • Label the takeaway, not the axis: "Most commits land on Tuesday".
  • Mono for ticks and values.
Don't
  • Gridlines behind small charts.
  • A third colour from the tones for a series.
  • Charts without a text or table equivalent for exact values.