Legend

A standalone legend component for building custom chart layouts or adding external legends to any visualization.

Basic Usage

Display a simple legend with items:

Sales$12,345

Revenue$45,678

Costs$8,900

tsx

import { Legend } from '@derpdaderp/chartkit';

<Legend
  items={[
    { key: 'sales', label: 'Sales', color: '#4ade80', value: '$12,345' },
    { key: 'revenue', label: 'Revenue', color: '#38bdf8', value: '$45,678' },
    { key: 'costs', label: 'Costs', color: '#a78bfa', value: '$8,900' },
  ]}
  theme="midnight"
/>

Layout Direction

Use direction for vertical or horizontal layouts:

Horizontal (default)

Sales$12,345

Revenue$45,678

Costs$8,900

Vertical

Sales$12,345

Revenue$45,678

Costs$8,900

Marker Styles

Choose between circle, square, or line markers:

Circle (default)

Sales$12,345

Revenue$45,678

Costs$8,900

Square

Sales$12,345

Revenue$45,678

Costs$8,900

Line

Sales$12,345

Revenue$45,678

Costs$8,900

Interactive Legend

Enable interactive mode to allow toggling series visibility:

Visible: sales, revenue, costs

tsx

const [visibility, setVisibility] = useState({
  sales: true,
  revenue: true,
  costs: true,
});

<Legend
  items={items.map((item) => ({
    ...item,
    visible: visibility[item.key],
  }))}
  theme="midnight"
  interactive
  onItemClick={({ key, visible }) => {
    setVisibility((prev) => ({ ...prev, [key]: !visible }));
  }}
/>

Without Values

Set showValues={false} to hide values:

Sales

Revenue

Costs

LegendItem Interface

Prop	Type	Default	Description
`key*`	`string`	-	Unique identifier
`label*`	`string`	-	Display label
`color*`	`string`	-	Item color
`visible`	`boolean`	-	Visibility state (for interactive)
`value`	`string \| number`	-	Optional value to display

Props

Prop	Type	Default	Description
`items*`	`LegendItem[]`	-	Legend items to display
`theme*`	`ThemeName`	-	Theme name
`direction`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment
`interactive`	`boolean`	`false`	Enable toggle interaction
`onItemClick`	`(event: LegendClickEvent) => void`	-	Click handler for interactive mode
`marker`	`"circle" \| "square" \| "line"`	`"circle"`	Marker shape
`markerSize`	`number`	`10`	Marker size in pixels
`showValues`	`boolean`	`true`	Show values next to labels
`gap`	`number`	`16`	Gap between items in pixels