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" },
    ]}
  />

Visual variants

Themes

primary
Status
  • Open24
  • Resolved38
  • Escalated9
secondary
Status
  • Open24
  • Resolved38
  • Escalated9
tertiary
Status
  • Open24
  • Resolved38
  • Escalated9
quaternary
Status
  • Open24
  • Resolved38
  • Escalated9

States

success
Status
  • Open24
  • Resolved38
  • Escalated9
warning
Status
  • Open24
  • Resolved38
  • Escalated9
error
Status
  • Open24
  • Resolved38
  • Escalated9
info
Status
  • Open24
  • Resolved38
  • Escalated9
visual-variants.tsx
// Themes
<Legend theme="primary"
    label="Status"
    items={[
      { label: "Open", color: "#2f80ed", value: "24" },
      { label: "Resolved", color: "#27ae60", value: "38" },
      { label: "Escalated", color: "#f2994a", value: "9" },
    ]}
  />
<Legend theme="secondary"
    label="Status"
    items={[
      { label: "Open", color: "#2f80ed", value: "24" },
      { label: "Resolved", color: "#27ae60", value: "38" },
      { label: "Escalated", color: "#f2994a", value: "9" },
    ]}
  />
<Legend theme="tertiary"
    label="Status"
    items={[
      { label: "Open", color: "#2f80ed", value: "24" },
      { label: "Resolved", color: "#27ae60", value: "38" },
      { label: "Escalated", color: "#f2994a", value: "9" },
    ]}
  />
<Legend theme="quaternary"
    label="Status"
    items={[
      { label: "Open", color: "#2f80ed", value: "24" },
      { label: "Resolved", color: "#27ae60", value: "38" },
      { label: "Escalated", color: "#f2994a", value: "9" },
    ]}
  />

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

Interaction states

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

Props API

9 props
Columns
Legend props API
Default
Description
classNamestringNostyling—Additional class name for the root.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
itemsLegendItem[]Yesprops—Items rendered in the legend.
labelReactNodeNoprops—Visible legend label.
loadingbooleanNopropsfalseWhether the component should display a loading state.
orientation"horizontal" | "vertical"Noprops"horizontal"Legend orientation.
stateStateTypeNostyling—Visual state class used for styling.
testIdstringNopropsdataTestId ?? "legend"Optional test ID for testing frameworks.
themeThemeTypeNostyling"primary"Theme class used for styling.