SparklineBestPractices

Layout

A standard sparkline component is comprised of a single area chart. The value shown to the right of the sparkline represents the latest data of the trendline. It does not represent the average value of the data plotted. Most scenarios that require sparklines typically need only green and red to show positive or negative trend, respectively. If representing a neutral trend, use Comm Blue #0078D4. However, the color of the sparkline can be customized to suit your product and scenario you’re designing for. You can use positive, negative, and neutral colors next to each other.

Content

• Line 1px line
• Fill Same color as line with opacity of 0.2
• Legend Latest value to show as label after the chart.

Do's

• The most important value is displayed directly next to the chart.
• Sparkline can be embedded within tables, paragraphs, lists and more.

Don'ts

• Don’t enable a hover state. The most important value is displayed directly next to the chart.