Legend component for displaying chart legends and binding to click events of individual legend items.
A legend names what each color in a chart stands for. Add one when a chart draws more than one series — grouped or stacked bars, several lines, the slices of a pie — and the colors alone don't say which is which. A chart with a single series usually doesn't need one: its title or axis label names it.
A legend is also a filter. Each item is a switch: clicking it, or pressing Enter or Space on it, turns it off, and the chart can hide that series so readers can compare the rest. The legend doesn't hide anything itself — it tells you which items are on, and your chart's config decides what that means, as in the example below.
Keep the legend next to its chart, with its items in the same order as the chart's series: an item without a colorOverride takes the theme palette's color for its position, the same color the chart gives its series at that index. For a screen reader, the legend is a group named by its heading, and each item a switch announced as on or off.
Three weeks of sales, grouped by product. Click a week to hide or show its bars; for the same thing with a pie, see the Pie Chart page.
Click a legend item to hide or show that week's bars.
Hiding a week sets hide on its bars rather than removing them: each keeps its slot and its color, so the other weeks don't shift and the swatches keep matching.
import { Component, computed, signal } from '@angular/core';
import { PcacBarVerticalChart, PcacBarVerticalChartConfig, PcacLegend, PcacLegendConfig, PcacLegendConfigItem } from '@pioneer-code/pioneer-charts';
@Component({
imports: [PcacLegend, PcacBarVerticalChart],
template: `
<pcac-legend [config]="legend()" (itemClicked)="onWeeksClicked($event)" />
<pcac-bar-vertical-chart [config]="bars()" />
`,
})
export class SalesComponent {
// Groups (products), each with a bar per week: { key: 'Chips', data: [{ key: 'Week 1', value: 687 }, ...] }
readonly config = signal<PcacBarVerticalChartConfig>({ data: [ ... ], height: 200 });
/** The weeks switched off from the legend. */
readonly hidden = signal<ReadonlySet<string>>(new Set());
/** One item per week, in the order the chart colors them: the order the weeks first appear. */
readonly legend = computed<PcacLegendConfig>(() => ({
heading: 'Week',
items: [...new Set(this.config().data.flatMap((group) => group.data.map((bar) => String(bar.key))))]
.map((week) => ({ label: week, checked: !this.hidden().has(week), colorOverride: null })),
}));
readonly bars = computed<PcacBarVerticalChartConfig>(() => ({
...this.config(),
data: this.config().data.map((group) => ({
...group,
data: group.data.map((bar) => ({ ...bar, hide: this.hidden().has(String(bar.key)) })),
})),
}));
onWeeksClicked(items: PcacLegendConfigItem[]): void {
this.hidden.set(new Set(items.filter((item) => !item.checked).map((item) => item.label)));
}
}<pcac-legend [(config)]="config" (itemClicked)="onItemClicked($event)" />
import { PcacLegend, PcacLegendConfig, PcacLegendConfigItem } from '@pioneer-code/pioneer-charts';| Property | Description | Type | Default |
|---|---|---|---|
| heading | If provided, will display a Heading for the legend. | string | null |
| items | Collection of legend items to display, in order. Each is a PcacLegendConfigItem:
| PcacLegendConfigItem[] | [] |
config is a two-way model: when an item is clicked the legend replaces its config with one whose item has checked flipped, and writes it back through [(config)] if you bind that way. With a one-way [config] the change only reaches you through the (itemClicked) event.
| Binding | Description | Payload |
|---|---|---|
| (itemClicked)="onItemClicked($event)" | Emitted when a legend item is clicked or toggled from the keyboard, with every item's updated state — the clicked one's checked flipped. Typically used to set hide on the matching chart series. | PcacLegendConfigItem[] |