Chart legend · Orbex Sonar-DB Design System

Examples

Names, and names with values

Shipped
On hold
Pending

Overdue2,230,800 USD
Not due yet1,669,200 USD

Code

tsx

import { ChartLegend } from '@orbex/sonar-components/chart-legend'

/* Names alone, under a chart that states its figures; or names with values, when the chart has none */
export default function Legend() {
  return (
    <div style={{ display: 'grid', gap: 20 }}>
      <ChartLegend
        items={[
          { label: 'Shipped', tone: 'accent' },
          { label: 'On hold', tone: 'strong' },
          { label: 'Pending', tone: 'muted' },
        ]}
      />
      <ChartLegend
        items={[
          { label: 'Overdue', tone: 'danger', value: '2,230,800 USD' },
          { label: 'Not due yet', tone: 'muted', value: '1,669,200 USD' },
        ]}
      />
    </div>
  )
}

Usage

Under the chart, in the order of the chart’s parts.
Hide it from assistive technology when the chart’s name already lists the parts.

Do and don’t

DoThe legend lists the parts in the order the chart draws them.

Don’tA legend in another order: the eye has to match colors back and forth.

DoValues in the legend when the chart has no figures of its own.

Don’tA legend for a single series: the title already names it.

Accessibility

Keyboard

Key	What it does
None	The legend is text, not a control.

Roles and attributes

Element or attribute	What it gives
`<ul role="list">`	A list of names, read in the order of the chart’s parts.
`aria-hidden`	When the chart’s own name already lists the parts, the legend is hidden so they are not read twice.
Dots	Drawn; the name always says what the color stands for.

Notes

Every color has a name beside it, so no part depends on telling hues apart.

Use it

Each component is its own entry point with its own stylesheet, so an app loads only what it uses. The tokens and the cascade layers are set once for the app: see Installation.

tsx

import { ChartLegend } from '@orbex/sonar-components/chart-legend'
import '@orbex/sonar-components/chart-legend.css'

API

Props of ChartLegend
Prop	Type	Default
`items` Required One entry per color, in the order of the chart’s parts.	`ChartLegendItem[]`	—

Also takes every attribute of the native <ul> , except children, and a ref to it.