Chart Legend

Legends help communicate the relationship between data and its visual representation.

Legend overview

Best Practices


  • If the chart only has one data category, a legend is not needed.
  • A legend should be sorted in a manner that follows the progression of the data series, starting from left to right for a horizontal legend or top to bottom for a vertical legend.

Usage Guidelines


Position

By default, legends are positioned at the bottom of the chart. When space is plentiful, the legend can be positioned to the right of the chart to provide maximum context.

Legend positioned at bottom of chart
Legend positioned to right of chart

Truncation

Legend labels will go to a maximum width of 64px (approx. 10 characters) before truncating with an ellipsis. A tooltip should be displayed on hover of the truncated legend label.

Truncated legend