Patterns
Charts
Charts are a visual way to display data in order to highlight trends and social activity that may be impacting a user's business.
Formatting
When creating charts, try not to plot more than four items per chart.
Data density
The max number of metrics allowed on a single chart should be no more then ten. The ideal state for readability is four.
Static charts
- Charts should sit on a white background with a gray border. The Sprout Social or Bambu logo should be located in the bottom-left and a URL in the bottom-right.
- Layout specifics will vary by visualization type. Documented guidelines for data include:
- Bar charts
- Line charts
- Pie charts
- Tables
Live charts
Line
A line chart is created by connecting a series of data points together with a line. Line charts are good to show change over time, comparisons and trends.
- Line weight:
3px - Used for single metrics or comparisons.
Round off points
Use sharp edges
Bar / Horizontal Bar
Bar charts are used for comparing discrete categories. Use a bar chart when there is a constraint to the number of data points that can appear on the visualization; otherwise, it becomes difficult to scale.
Stacked Area
Used for multiple metrics. Cumulative totals.
Multi Select
- Line chart with an interactive key.
- Maximum of 20 items
Donut
Donut charts are best to use when you are trying to compare parts of a whole (ie x% out of 100%). They do not show changes over time. They work best when the data points are simple and comparisons between different percentages are dramatic.
- If needed use
1pxwhite line separations between segments for clarity. - Large and small variations available.
- Two small sized donut charts are equal to the height of one large donut chart.
Because donut charts do not lend well to heavy text usage, keys are a good way to display topic labels.
Colors
It’s all about contrast! Colors should be distinct to allow the viewer to quickly and easily distinguish data points.
Rotation
When creating charts, use complementary color schemes to ensure that the data can easily be differentiated. Colors should be applied in the following order:
Brand campaigns and initiatives
If you’re creating data visualizations for a brand campaign or initiative that has a specific color palette, you don’t need to use this color system. However, you should make sure that the colors you use have sufficient color contrast on the color wheel (avoid analogous color schemes).
Best Practices
