Legend

The Legend component explains colors or series labels used by charts and data displays.

Usage & Examples

Chart Legend

Status

Open24
Resolved38
Escalated9

chart-legend.tsx

<Legend
  label="Status"
  items={[
    { label: "Open", color: "#2f80ed", value: "24" },
    { label: "Resolved", color: "#27ae60", value: "38" },
    { label: "Escalated", color: "#f2994a", value: "9" },
  ]}
/>

Props API

Legend props API
				Default	Description
`className`	`string`	No	styling	`—`	Additional class name for the root.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`items`	`LegendItem[]`	Yes	props	`—`	Items rendered in the legend.
`label`	`ReactNode`	No	props	`—`	Visible legend label.
`loading`	`boolean`	No	props	`false`	Whether the component should display a loading state.
`orientation`	`"horizontal" \| "vertical"`	No	props	`"horizontal"`	Legend orientation.
`state`	`StateType`	No	styling	`—`	Visual state class used for styling.
`testId`	`string`	No	props	`dataTestId ?? "legend"`	Optional test ID for testing frameworks.
`theme`	`ThemeType`	No	styling	`"primary"`	Theme class used for styling.