Legend

Updated:

Use for displaying chart legends with interactive item selection.

Properties

Learn more about properties.

data

An array of objects that contain the data to be displayed.

format

The format of the value displayed in the legend.

hoveredItemId
hovered-item-id

The id of the item to set as hovered.

selectedItemId
selected-item-id

The id of the item to set as selected.

Events

The q2-legend element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

click

Emitted when a legend item is clicked.

Event Detail Type signature

IDonutChartData

mouseenter

Emitted when the mouse enters a legend item.

Event Detail Type signature

IDonutChartData

mouseleave

Emitted when the mouse leaves a legend item.

Event Detail Type signature

IDonutChartData

tctClick

Emitted when a legend item is clicked.

Event Detail Type signature

IDonutChartData

tctMouseEnter

Emitted when the mouse enters a legend item.

Event Detail Type signature

IDonutChartData

tctMouseLeave

Emitted when the mouse leaves a legend item.

Event Detail Type signature

IDonutChartData

Dependencies

This component uses other components in the Tecton library, including:

  • click-elsewhere

Dependents

Other components in the Tecton library use this component, including:

  • q2-chart-donut

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-legend component.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!