Sparkline ​

The shape of a series in a small space: no axes, no numbers. The last value gets a dot in the accent colour — it is the one that matters.

<OSparkline :values="[12, 14, 13, 17, 16, 21, 19, 24, 23, 28]" label="Visits over ten days, rising to 28" />

The label is what a screen reader says instead of the picture: put the conclusion in it, not "chart".

Lower is better ​

For times, ranks and error counts, turn the chart over so that an improvement still goes up.

<OSparkline :values="laps" lower-is-better :width="160" :height="40" label="Lap times, down to 7.8 s" />

Tone ​

The dot is accent by default. Make it danger when the series ends somewhere bad.

<OSparkline :values="latency" lower-is-better tone="danger" label="Latency, climbing to 710 ms" />

Props ​