Legend

A chart legend mapping colour indicators to series names. Supports horizontal and vertical layouts with optional toggle interaction.

Preview

Horizontal

Revenue Expenses Profit Forecast Budget

Vertical

Direct (40%) Organic (25%) Referral (15%) Social (10%) Other (10%)

With disabled (toggled off) items

Revenue Expenses Profit

Props

Prop	Type	Default	Description
items	{ name: string; color?: string }[]	--	Legend entries
direction	'horizontal' | 'vertical'	'horizontal'	Layout direction
interactive	boolean	false	Allow click to toggle series visibility
disabled	string[]	[]	List of disabled series names
onToggle	(name: string) => void	--	Toggle handler

Code example

React

import { Legend } from '@thepace/lexicon/components';

<Legend
  direction="horizontal"
  interactive
  items={[
    { name: 'Revenue' },
    { name: 'Expenses' },
    { name: 'Profit' },
  ]}
  disabled={['Expenses']}
  onToggle={(name) => toggleSeries(name)}
/>

Vanilla HTML

<div class="lex-legend">
  <span class="lex-legend__item">
    <span class="lex-legend__dot lex-legend__dot--s1"></span> Revenue
  </span>
  <span class="lex-legend__item lex-legend__item--disabled">
    <span class="lex-legend__dot lex-legend__dot--s2"></span> Expenses
  </span>
  <span class="lex-legend__item">
    <span class="lex-legend__dot lex-legend__dot--s3"></span> Profit
  </span>
</div>

CSS class reference

Class	Purpose
.lex-legend	Flex container
.lex-legend--vertical	Vertical layout
.lex-legend__item	Legend entry
.lex-legend__item--disabled	Toggled-off state
.lex-legend__dot	Colour indicator circle
.lex-legend__dot--s1 through --s5	Series colours

Accessibility

• Use role="group" with aria-label="Chart legend".
• Interactive items should use role="switch" with aria-checked.
• Ensure colour dots have sufficient size (10 px minimum) and contrast.

Guidelines

Do

• Place the legend below or beside the chart.
• Use the vertical layout for pie/donut charts.
• Make the legend interactive when charts have many overlapping series.

Don't

• Don't place the legend far from the chart — keep proximity tight.
• Don't rely on colour alone — consider adding pattern icons for colour-blind users.