Legend

Annotate the chart contents with color and text labels.

Legends come in two variants: horizontal and vertical.

note

This component implements a third-party solution. Please refer to its Notes in Storybook for more information.

Behavior

Users can hover over a legend item to highlight its associated chart elements.

They can also select a legend item to hide and display the associated chart elements. The hidden legend items change their state to disabled.

Use the horizontal legend when you want to focus user attention on a single chart, and you have enough vertical space to accommodate both.

You should place the horizontal legend underneath the chart body and align it to the left. Center the legend items within the legend container.

Use the vertical legend when you need to describe multiple charts or don't have enough vertical space to accommodate both the chart and the legend.

Place the vertical legend to the right of the chart body and make it three columns wide. If necessary, add a vertical scroll to the legend content.