Sparkline
Best Practices
Overview
A sparkline is a single-series line chart without many of the details typically included in regular line charts. Like the data bite, waffle, and gauge, it is intended to provide at-a-glance information. Sparklines can be particularly helpful when used in groups to help readers compare trends across time. (See examples at the bottom of this page.)
Usage
- You can use sparklines singly or in groups. Grouped visualizations invite readers to compare data points, so you should make certain that grouped sparklines are comparable in terms of public health messaging and presentation. While there may be exceptions to the rule, generally this means that all sparklines in the group have comparable start and end points and the same number of data points.
- When grouping sparklines, stack them vertically if possible. This arrangement helps the reader scan the information more easily.
- Good titles and supporting text can be invaluable for providing context, but keep them as brief as possible. (See examples for sparklines with text.)
- Providing a data source makes your graphic more reputable. It also allows those who are interested to dig deeper.
- Go to ExamplesSee examples on this page that illustrate key options.
- Building in the WCMSSee key tips and guidelines for working with sparklines in the WCMS.
- TP4 UX Best Practices [PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
These sparklines are presented in a table-style module. The vertical layout helps readers compare the data trends. It’s easy to see, for example, that the trend for 2018 is the most consistently upward. (Remember to test your data visualizations in both small and large viewports.)
Note that all three sparklines begin and end at comparable points in time. And all three have the same number of data points (seven). The number of data points may not be obvious to the reader, but it’s key to ensuring comparability of the trends.
Table-Style Module with Sparklines
2016: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2017: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2018: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
About the data: All three sparklines were generated with the same data file. (View the data [XLS – 329 B].) The “Limit by Start/End Dates” option in the Date/Category Axis panel limits each sparkline to a year of data points. The WCMS copy function was used to quickly generate each sparkline.
Sparkline Options: However you implement sparklines — as elements of a table-style module or as independent modules — the Visual panel in the chart designer offers a variety of styling options, as illustrated by the examples below.