Charts·component·@astryxdesign/chartsExperimental

Chart Legend

ChartLegend pairs series labels with decorative mark-shaped color swatches. Use Chart legend options for the generated legend, or render ChartLegend directly when the caller already owns the legend items.

@astryxdesign/charts

Authored source examples

Source examples recorded in the documentation for this entry.

Generated chart legend

import {Chart, bar, line} from '@astryxdesign/charts';

<Chart
  data={monthlyRevenue}
  xKey="month"
  series={[
    bar('revenue', {label: 'Revenue'}),
    line('forecast', {label: 'Forecast'}),
  ]}
  legend={{position: 'top', alignment: 'start'}}
/>;

Standalone legend

import {ChartLegend} from '@astryxdesign/charts';

<ChartLegend
  items={[
    {label: 'Revenue', color: '#3b82f6', type: 'bar'},
    {label: 'Forecast', color: '#f59e0b', type: 'line'},
  ]}
  position="start"
  alignment="center"
/>;

Usage

Give every item a concise label that identifies the corresponding series without relying on its color name.
Use start or end for a vertical legend and top or bottom for a wrapping horizontal legend.
Use the legend as the chart’s only text alternative. Give the parent Chart an accessible name and preserve an equivalent data view or summary when the data requires one.
Assume arbitrary series colors will remain distinguishable in every theme. Verify the complete chart and legend together against the surfaces where they render.

Typed props

Prop	Type and behavior
`items`	`LegendItem[]` · default [] Series entries to render. Each entry supplies a label, color, and optional mark type. An omitted or empty array renders nothing.
`position`	`'top' \| 'bottom' \| 'start' \| 'end'` · default 'bottom' Logical placement used by Chart and the legend orientation: top and bottom are horizontal; start and end are vertical.
`alignment`	`'start' \| 'center' \| 'end'` · default 'start' For top and bottom, distributes the row along its inline axis. For start and end, aligns each entry horizontally within the vertical list.

Anatomy

Legend list · required

Wrapping horizontal or stacked vertical list that groups the legend entries.

Legend entry · required

One series label paired with its decorative swatch.

Series swatch · required

Decorative square for bar marks or short line for other mark types, painted with the item color.

Series label · required

Supporting text that names the series.

Accessibility

Named list

Semantics · 1.3.1 Info and Relationships · Built in

Entries render as items in a localized Chart legend list. Each visible label supplies the series name while its swatch stays hidden from assistive technology.

States: Non-empty

Chart alternative

Content · 1.1.1 Non-text Content · Required on the parent Chart

The legend supplements the parent Chart. It does not replace the Chart accessible name, data table, summary, or other equivalent alternative.

States: All

Series distinction

Color contrast · 1.4.1 Use of Color; 1.4.11 Non-text Contrast · Consumer verification required

Caller-supplied series colors must remain distinguishable on the rendered surface. Do not depend on color alone when otherwise identical marks need to be matched across the chart and legend.

States: Non-empty