Micro-visualizations
Micro-visualizations are small-scale visualizations that support larger sets of data. They can appear in tables, cards, popovers, and other small spaces, to provide a quick graphic representation of data that supports text content.
Use cases
- When adding charts to small spaces such as tables to support the accompanying information
- When displaying data that can be easily understood at a glance without supporting numbers and text to help users make quick decisions
- When the user needs an immersive and detailed experience to understand the data. Use one of the regular chart typesregular chart types instead.
General guidelines
Interactions
Make the micro-visualization interactive by either displaying a tooltip on hover or opening a new page with a detailed, full-size chart. That way, the user can explore the data in more detail if needed.
Displaying data
If possible, annotate key points on the mini-chart to describe the data and make it understandable. Micro-visualizations should have a simplified design but still convey meaning at a glance.
Placement
Micro-visualizations should be used in limited spaces, such as tables, dashboards, or modules.
Datapoints
Datapoints show at-a-glance data for users to quickly understand key metrics. They display a single numerical metric and are accompanied by a trend icon to give users context about the data displayed. Datapoints can be paired with sparklines for extra visual context.
Mini-bars
A mini-bar chart serves the same function as a regular bar chart [link to bar charts], but mini-bars can be used within tables, cards, and other small spaces to reinforce the understanding of numerical values when comparing large amounts of data. Due to their compact form, mini-bars are usually placed in rows for easy vertical scanning.
Mini-bars can also be displayed stacked to show percentages, like for example, a visualization of how many items there are in stock.
Mini-donuts
Mini-donuts can help users see parts of a whole as percentages. They are best used when there are 2 to 3 segments to represent since they can get small and be hard to read, especially in a reduced version. If there are more segments to represent, opt for a group of mini-bars.
Sparklines
Sparklines are small and simplified line or area charts that show the general trend over time. They can be included in display metrics, tables, spreadsheets and graphics. By placing sparklines in a relevant context, they give single numbers meaning.
Regarding scale, there isn’t an aspect ratio where “one size fits all”. Sparklines should be moderately greater in width than in height, to avoid a spiky or flat profile, which can lead to incorrect data interpretation. When shown together, they should adopt the same range if they’re being used for trend comparison purposes.
