BundyUI

Charts

ChartLegend

The swatch-and-label list every multi-series chart renders under its plot. Presentational by default; `interactive` turns each entry into a button for an app that filters series.

html
<UiChartLegend :items="..." />

Needs the charts module

This component ships in @jgastager/bundy-ui/charts, a separate module so projects that never draw a chart don't carry the paint classes these need. Nothing extra to install — just add the module entry. See Charts.

Items

required

items is one entry per series, each a key, a label and a color — the same semantic name the mark is painted with, which chartSequenceColor(index) hands you in the order the charts assign them. Every multi-series chart renders one of these under its plot already, so you only reach for it directly on a chart you've hand-built in a UiChartFrame.

  • Desktop
  • Mobile
  • Tablet

When you filter series, keep each one's colour tied to its own identity, not to its index among the *visible* series. Recomputing colours from the filtered list repaints the survivors every time something is toggled, which reads as the data changing.

Orientation

orientation flows the entries in a row or a column. horizontal wraps them under the plot — right while the labels are short. vertical gives each one its own line, which is what you want for long labels, for a value printed beside each label, or for a legend running down the side of the plot instead of under it.

  • Desktop · 8,680 visits
  • Mobile · 7,630 visits
  • Tablet · 1,430 visits
  • Desktop · 8,680 visits
  • Mobile · 7,630 visits
  • Tablet · 1,430 visits

Align

align follows the orientation: it justifies a row, and cross-aligns a column.

  • Desktop
  • Mobile
  • Tablet
  • Desktop
  • Mobile
  • Tablet
  • Desktop
  • Mobile
  • Tablet

Interactive

interactive turns each entry into a button that emits select. The legend never hides a series by itself — which series exist is the chart's data question — so the surrounding component owns the filtered set and passes hidden back down.

Presentational by default. interactive makes each entry a button that emits select, but the legend never hides a series itself — which series exist is the chart's data question, so the parent owns the filtered list and passes hidden back down.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
itemsrequired
ChartLegendItem[]
—
The entries to list, in the same order the chart assigned its colors.
orientation
"horizontal" | "vertical"
'horizontal'
How the entries flow. - `horizontal` — one wrapping row under the plot. The default, and the right one while the labels are short enough that a few fit on a line. - `vertical` — one entry per line. Better for long labels, for values printed beside each label, or for a legend placed down the side of the plot rather than under it.
align
"start" | "center" | "end"
'start'
Where the entries sit across the legend's width — `justify-*` when `horizontal`, and the cross-axis alignment when `vertical`.
interactive
boolean
false
Renders each entry as a button emitting `select`, for an app that filters series on click. Purely presentational otherwise — the legend never hides a series by itself, since which series exist is the chart's data question, not the legend's.

Emits

Event
Payload
Description
select
[key: string]
An entry was clicked. Only fires when `interactive` is set.

Types

ts
interface ChartLegendItem {
    /** The series key this entry stands for — what `select` emits. */
    key: string;

    /** Text shown beside the swatch. */
    label: string;

    /** The series' semantic color, painted onto the swatch as a utility class. */
    color: ChartColorName;

    /** Dims the entry, for a series the surrounding app has filtered out. */
    hidden?: boolean;
}
ts
type ChartColorName = ChartColorFamily | `${ChartColorFamily}-${ChartColorShade}`;