Chart Swatch

Authored source examples

Source examples recorded in the documentation for this entry.

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

<ChartSwatch color="#3b82f6" variant="square" />;

import {
  ChartSwatch,
  swatchVariantForType,
} from '@astryxdesign/charts';

<ChartSwatch
  color={series.color}
  variant={swatchVariantForType(series.type)}
/>;

Usage

ChartSwatch renders the small decorative mark that pairs a chart series color with its visible label. Use a square for bar series and a short line for other series, including line, dot, and area marks.

• Place every swatch next to visible text that names the corresponding series. ChartSwatch is decorative and stays hidden from assistive technology.
• Use the square variant for bar series and the line variant for other mark types so legends and tooltips echo the plotted marks consistently.
• Use ChartSwatch as the accessible name or data alternative for a series. Its surrounding legend, tooltip, or chart must provide that information.
• Rely on arbitrary colors alone when multiple same-shaped series must be matched across a chart. Verify the complete chart and its labels together.

Typed props

Anatomy

Accessibility