Charts

Charts show numbers at a glance: how many orders came in, which countries they came from, how this year compares to the last. Nausikaä draws them with plain lists and a little inline SVG. The numbers are in the HTML, so a chart can be read without its styling, by a screen reader, and when printed.

These charts need no JavaScript. Your server, or your own script, works out the sizes; Nausikaä takes care of how the chart looks. For charts with many data points, zooming or tooltips, a charting library is the better tool.

In use: the statistics dashboard example combines all of these charts on one page, with numbers counted on the server.

A stat is one key figure: a label that says what is counted, the value, and an optional note. Put several in a list with the class stats to place them next to each other; they share the width equally and wrap on a small screen. A color class colors the left edge.

<ul class="stats">
  <li class="stat blue">
    <span class="label">Orders</span>
    <span class="value">6,790</span>
    <span class="note">11% more than last year</span>
  </li>
  <li class="stat green">...</li>
  <li class="stat">...</li>
</ul>

A list with the classes chart bars shows one row per item: a label, a bar and the value. The length of a bar comes from the custom property --nausikaa-chart-value, a percentage you set in the style attribute. Give the longest bar 100% and the others their share of it.

<ul class="chart bars">
  <li>
    <span class="label">Netherlands</span>
    <span class="bar" style="--nausikaa-chart-value: 100%"></span>
    <span class="value">1,204</span>
  </li>
  <li>
    <span class="label">Germany</span>
    <span class="bar" style="--nausikaa-chart-value: 82%"></span>
    <span class="value">987</span>
  </li>
  ...
</ul>

Add thin for slimmer bars. A color class on the list colors all bars, a color class on one item or bar colors only that one. The columns for the labels and the values have a fixed width, so the bars line up; change them with --nausikaa-chart-label-width and --nausikaa-chart-value-width.

<ul class="chart bars thin green" style="--nausikaa-chart-label-width: 7em">
  <li>...</li>
  <li class="yellow">...</li>
  <li class="red">...</li>
</ul>

Accessibility: always show the number next to the bar. A bar has no meaning for a screen reader, and color alone should never carry the message.

With chart columns the bars stand up, next to each other. This suits a series over time. Put the bar first, then the value and the label; here --nausikaa-chart-value sets the height of the bar. The chart is as high as --nausikaa-chart-height, which is 12em unless you change it.

<ul class="chart columns">
  <li>
    <span class="bar" style="--nausikaa-chart-value: 62%"></span>
    <span class="value">4,210</span>
    <span class="label">2019</span>
  </li>
  <li>
    <span class="bar" style="--nausikaa-chart-value: 47%"></span>
    <span class="value">3,180</span>
    <span class="label">2020</span>
  </li>
  ...
</ul>

Groups

Several bars in one item form a group, to compare two or more series. Give each series its own color and explain the colors with a legend. The values no longer fit below the bars, so put them in the title attribute and offer the numbers in a table as well.

<ul class="chart columns" style="--nausikaa-chart-height: 9em">
  <li>
    <span class="bar gray" style="--nausikaa-chart-value: 48%" title="Last year: 480"></span>
    <span class="bar blue" style="--nausikaa-chart-value: 55%" title="This year: 550"></span>
    <span class="label">Jan</span>
  </li>
  ...
</ul>

<ul class="chart legend right">
  <li class="gray">Last year</li>
  <li class="blue">This year</li>
</ul>

An ordered list with chart ranked is a top list: the position is numbered for you, the label can be a link, and the value lines up on the right. A long label is cut off rather than wrapped.

<ol class="chart ranked">
  <li>
    <a href="..." class="label">Alcinous University Library</a>
    <span class="value">&euro; 48,210</span>
  </li>
  ...
</ol>

A donut shows the parts of a whole. It is an inline SVG with the classes chart donut and one <circle> per part. Every circle has a radius of 15.915, which makes its circumference exactly 100. That turns the two SVG attributes into simple sums:

• stroke-dasharray is the share of the part and the rest: "54 46" for 54%.
• stroke-dashoffset is where the part starts: 25 minus the sum of the parts before it, plus 100 when that is below zero. The first part starts at the top with 25; a part that comes after 54% starts at 71.

A circle with the class track draws the full ring behind the parts. Text in the middle is optional: a <text> for the figure, and one with the class label for what it means.

<svg class="chart donut" viewBox="0 0 42 42" role="img"
     aria-label="Orders by status: 54% delivered, 31% on order, 15% cancelled">
  <circle class="track" cx="21" cy="21" r="15.915" />
  <circle class="green" cx="21" cy="21" r="15.915" stroke-dasharray="54 46" stroke-dashoffset="25" />
  <circle class="yellow" cx="21" cy="21" r="15.915" stroke-dasharray="31 69" stroke-dashoffset="71" />
  <circle class="red" cx="21" cy="21" r="15.915" stroke-dasharray="15 85" stroke-dashoffset="40" />
  <text x="21" y="20">6,790</text>
  <text x="21" y="25.5" class="label">orders</text>
</svg>

The donut is 10em wide. Add small or large for another size. One part on a track makes a simple gauge.

Accessibility: give the SVG role="img" and an aria-label that states the numbers, or list them in a legend next to it. Keep a donut to a handful of parts; small differences are easier to compare with bars.

A line chart is an inline SVG with the classes chart lines and a <polyline> for each series. You choose the coordinate system with the viewBox; the example uses 0 to 100 in both directions, with one point for every month. Mind that in SVG the vertical axis runs downward: a value of 80 on a scale of 100 is drawn at y="20".

With preserveAspectRatio="none" the chart stretches to the width of its container and to the height of --nausikaa-chart-height, while the lines keep their thickness. A <line> draws a grid line and a <polygon> fills the area below a series.

<svg class="chart lines" viewBox="0 0 100 100" preserveAspectRatio="none" role="img"
     aria-label="Orders per month, this year compared to last year">
  <line x1="0" y1="50" x2="100" y2="50" />
  <line x1="0" y1="100" x2="100" y2="100" />
  <polygon class="blue" points="0,100 0,45 9,39 18,34 ... 100,5 100,100" />
  <polyline class="gray" points="0,52 9,48 18,30 ... 100,29" />
  <polyline class="blue" points="0,45 9,39 18,34 ... 100,5" />
</svg>

Accessibility: a line chart can't be read by a screen reader. Describe what it shows in the aria-label and offer the numbers in a table nearby.

A list with the classes chart legend explains the colors of a chart. Every item gets a dot in the color of its class. Add right to align the legend to the right.

<ul class="chart legend">
  <li class="green">Delivered</li>
  <li class="yellow">On order</li>
  <li class="red">Cancelled</li>
  <li class="gray">Unknown</li>
</ul>

Charts are blue. Every color of the palette, and gray, is available as a class. Put it on the chart to color everything in it, or on a single item, bar, circle or line. For a color of your own, set --nausikaa-chart-color.

E-ink: in the e-ink theme charts have three shades. mauve, red, maroon and blue (the default) are black; green, peach, lavender, flamingo, rosewater, sapphire and teal are dark grey; yellow, pink, sky and gray are light grey. Choose the colors of series that sit next to each other from different groups, and keep to three series at most.