Legends Design Only
A legend is a key that defines the visual representation of the data shown in a graph, chart or other visualization.
Standard Legend
A standard legend appears below the visualization. The color or other visual (such as a pattern or icon) appears on the left and the text description appears on the right.
Examples
- Standard Legend (shown above)
- Standard Legend for Line Graphs
- Expand/Collapse Legends
- Side Legend
- Tabular Side Legend
- Heat Map Legend
- Selectable Legend
Usage
Legends are highly recommended for all data visualizations. They may be omitted if the information is redundant or otherwise obvious to the user. For example, when the color swatch and corresponding description appear in the tags defined in the search field.
Examples
Standard Legend for Line Graphs
Expand/Collapse Example
This version may either be expanded or collapsed by default. Consider displaying the collapsed view by default on smaller screen sizes and/or when the meaning of the visuals is well-understood by users.
Side Legend
A side legend is a vertically oriented variation that appears to the right of the visualization (on larger screen sizes). It collapses to below the visualization at smaller screen sizes. This variation is more commonly displayed alongside Donut & Pie Charts.
Tabular Side Legend
A tabular side legend displays the values alongside the visual key and is also most commonly used with Donut & Pie Charts.
Heat Map Legend
Selectable Legend
A selectable legend should be used when the user may toggle data elements within the visualization on and off.
