Components / Library Version 5.25.0

Chart Legend

The chart legend component (wm-chart-legend) displays legends for one or more chart components. It is designed to be used externally from the chart, allowing the same legend to be shared across multiple charts.

The component retrieves data (colors and legends) from the charts it references via the chart-ids attribute.

For simple charts with internal legends, use the showLegend config property on the Bar Chart component instead.

PropertiesExamplesAccessibility

Properties

* Required property

chart-ids *
string
A space-separated list of chart element IDs that this legend is associated with. The legend retrieves its data from these charts.
orientation
"horizontal" | "vertical"
The layout orientation of the legend items. Defaults to "horizontal".

Usage in HTML

Edit the code below to see changes reflected in the example above.

Javascript Sample

Example code for functionality.

Usage in Elm

Code generated from HTML.

Screen Reader

The chart legend is hidden from screen readers. The relevant data is announced when the user interacts with the associated chart.

Focus Behavior

When a bar or legend item is in focus, all other legend items are visually dimmed to highlight the focused item. All other bars in connected charts are dimmed as well.

Back to Top