Components

Legends

Legends identify the meaning of various elements in a data visualization and can be used as an alternative to labeling data directly.

Legends are commonly used with data visualizations when there is more than one color or line type being used – most commonly in maps. By moving labels outside of a visualization, legends can help to reduce clutter and make your data visualization more user-friendly as a result.

Legends always include a series of item markers with corresponding labels and can optionally include a title. When using legends, be sure to follow the guidance below.

Placement

Legends should be placed below or parallel to a data visualization, depending on the type of data being labeled and the available space surrounding the data visualization. If using sequential or diverging data, ensure that the legend is displayed in a vertical format next to the visualization so that the data can be properly ordered.

Title

A legend title is not necessary to include. When it is included however, it should be descriptive and reinforce the title or subtitle of the visualization. Instead of using a generic title like “Legend” or “Key,” try using a title that captures the meaning of the data being labeled, such as “Population per Square Mile.”

Acceptable Example

Legend
Why it's Only Acceptable

The legend title missed an opportunity to include helpful information about the kind of data inside of the data visualization. If you are including a legend title, be sure to make it descriptive.

Preferred Example

Population per Square Mile
Why it‘s Preferred

Now that the legend title describes the type of data being visualized, users will have a better sense of what the data visualization is all about.

Ordering Elements

When using sequential data, ensure that the highest number appears first at the top of the legend and the lowest number appears last at the bottom of the legend. For diverging data, a vertical legend is also recommended, with the most extreme values at opposite ends of the legend.

Failed Example

Average Winter Temperature
-9 to 0
1 to 10
11 to 20
21-30
31-40
Why it Fails

By displaying the data in ascending order, the lower numbers appear at the top of the legend. This type of order deviates from best practices in usability. It is also important to maintain consistent ordering across legends, especially when displaying visualizations in a series.

Preferred Example

Average Winter Temperature
31-40
21-30
11 to 20
1 to 10
-9 to 0
Why it‘s Preferred

Now that the data is displayed in descending order, the legend adheres to best practices and will result in more consistent and therefore more user-friendly data visualizations.

Guidance

Requirements

Always

Never

Recommendations

Recommended