Status
The status of the component
Documentation in progress
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
-
Best Practices
- Sparklines are intended to be accompanied with other pieces of information/content (eg. Another chart, a big number, as part of a data table) and shouldn’t be used in solidarity as they can be deemed as vague.
- Including a trendline can help viewers understand quickly how their data is performing against a benchmark.
- If including a trendline and the trendline overlaps the sparkline, the sparkline should always be in front of the trendline.
- If multiple sparklines are being used on a page, colour can sometimes become overwhelming and the “mono” variation should be used instead.
- By default, sparklines should be used without a fade but for visual emphasis, a fade can be added if desired.
Usage Guidelines
Positive
If data is trending in a positive direction, the colour of the sparkline should reflect this and be set to “positive”.
Neutral
If data is plateauing or trending steadily, the colour of the sparkline should reflect this and be set to “neutral”.
Negative
If data is trending in a negative direction, the colour of the sparkline should reflect this and be set to “negative”.
Mono
All variations above (ie. Positive, neutral, negative) can also be displayed in “mono” if desired or deemed more appropriate.
