Legends definition and purpose
Legends summarize the distinguishing visual properties such as colors or texture used in the visualization. A legend or key helps the user build the necessary associations to make sense of the chart.
data-visualization/legends
19 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Avoid using legends when possible
When possible, avoid using a legend and label data representations directly. Legends rely on visual association, which can make a chart more difficult to understand.
Single data category does not need legend
Your chart doesn't need a legend if it only presents one data category. Only use a legend if you can't safely assume there will be enough space to apply labels directly.
Clear language and avoid acronyms in legends
Use clear language and avoid acronyms in legends. This also applies to titles and axis labels.
Legend color and texture
Chart legends use color as the default distinguishing property for data sets and values. Texture can be used instead of, or in addition to, color to make your chart accessible for users with visual impairment.
Legend default position
Legends are positioned at the bottom of a chart by default.
Legend position options
Depending on the page's layout and context, you may position legends at the top, bottom (default), left, or right of a chart with respect to the graph frame.
Bottom or top legend position usage
Position the legend at the bottom or top of a chart in situations where space is scarce, such as a dashboard.
Left legend position usage
Position the legend to the left of the chart when better type alignment is needed. Be sure the surrounding elements of the chart are not too closely clustered.
Right legend position usage
Position the legend to the right of the chart when space is plentiful, or when you would like to provide the maximum context. In mobile, the legend could revert to a stack.
Overlay legend for geospatial charts
In geospatial charts, legends can be overlaid on top of a graph frame as long as the legend has a background opacity of 80 percent of the chart's background color. The legend can be placed on either side of the chart, top- or bottom-aligned, whatever best accommodates the content.
Hover to highlight legend interaction
Hovering over the legend of one category lowers the opacity of all other categories in the chart to 30 percent.
Click to isolate legend interaction
Clicking on the legend of one category isolates the information, hiding all other categories. The legend gets a checkmark on click, switching to a selected state.
Checkmarks disappear when all categories selected
When all categories are selected, checkmarks in legends disappear and the legend resets to its default state.
Hiding legends discouraged
Hiding legends is discouraged in data visualizations unless only one category of data is displayed. Hiding legends reduces the clarity of the visualization and is inaccessible.
Hidden legend interaction pattern
When legends are hidden on mobile displays, a 'View legends' button is added so users can surface the legend on tap. Clicking on 'View legends' reveals a modal with a list of legends where users can toggle each data category on and off.
Legend overflow default display
Up to two lines of legends are displayed by default.
Legend overflow expansion
Clicking on 'View more' expands the legend area to show all legends. A legend should not be taller than 30 percent of the chart's height.
Legend scrolling when exceeding height limit
When legends exceed 30 percent of the chart, overflow the content and scroll vertically.