Legends summarize the distinguishing visual properties such as colors or textureused in the visualization. A legend or key helps the user build the necessaryassociations to make sense of the chart.
Note: This guidance is a work in progress. To see our roadmap, make featurerequests, or contribute, please go to carbon-chartsGitHub repository.
- Usage
- Position
- Interactions
Usage
When possible, avoid using a legend and label data representations directly.Legends rely on visual association, which can make a chart more difficult tounderstand.
Your chart doesn’t need a legend if it only presents one data category. Onlyuse a legend if you can’t safely assume there will be enough space to applylabels directly.
Use clear language and avoid acronyms in legends. This also applies totitles and axis labels.
Remove legends to simplify the chart when only one data category is needed oronly one color is used.
In-chart labels are ideal for charts with predictable data and ample emptyspace.
Color and texture
Chart legends use color as the default distinguishing property for data sets andvalues. Texture can be used instead of, or in addition to, color to make yourchart accessible for users with visual impairment.
Texture can improve accessibility. See the accessibility page for all approvedtextures.
Position
The legends are positioned at the
bottom
Copy to clipboard
of a chart by default. Depending onthe page’s layout and context, you may choose to position the legends at the
top
Copy to clipboard
, under the chart title,
left
Copy to clipboard
or
right
See AlsoLegendEntry object (Excel)
Copy to clipboard
of a chart with respect to thegraph frame.
Bottom (default) and top
Position the legend at the bottom or top of a chart in situations where space isscarce, such as a dashboard.
Left
Position the legend to the left of the chart when better type alignment isneeded. Be sure the surrounding elements of the chart are not too closelyclustered.
Right
Position the legend to the right of the chart when space is plentiful, or whenyou would like to provide the maximum context. In mobile, the legend couldrevert to a stack.
Overlay (geospatial only)
In geospatial charts, legends can be overlayed on top of a graph frame as longas the legend has a background opacity of 80% of the chart’s background color.Since geospatial charts can vary drastically in appearance, the legend can beplaced on either side of the chart, top- or bottom-aligned, whatever bestaccommodates the content.
To demonstrate the legend’s background opacity, we chose to place the legend atthe top left in the chart below. See the Master data visualization design filefor more detail about geospatial legends.
Interactions
Hover to highlight
Hovering over the legend of one category lowers the opacity of all othercategories in the chart to 30 percent.
Click to isolate
Clicking on the legend of one category isolates the information, hiding allother categories. The legend gets a checkmark on click, switching to a selectedstate.
When all categories are selected, checkmarks in legends disappear and the legendresets to its default state.
Hidden legends
Please note that hiding legends is discouraged in data visualizations unlessonly one category of data is displayed. This design is for mobile displays whereoffering legends at a glance is less essential. In general, hiding legendsreduces the clarity of the visualization and is inaccessible.
When legends are hidden, a “View legends” button is added so users can surfacethe legend on tap.
When clicking on “View legends”, a modal with a list of legends appears withoptions to toggle each data category on and off.
Legend overflow
Up to two lines of legends are displayed by default. Clicking on View moreexpands the legend area to show all legends. A legend should not be taller than30 percent of the chart’s height.
When legends exceed 30 percent of the chart, overflow the content and scrollvertically.
