Chart legend

import { ChartLegend } from "@bosunkit/components/chart-legend";
import type { ChartRegistry } from "@bosunkit/components/chart-container";
import type { ReactElement } from "react";

export const description: string =
  "A standalone key keeps each series' registry color and pattern when only a subset is visible.";
const config: ChartRegistry = {
  primary: { label: "Primary", formatValue: String, color: "02" },
  comparison: { label: "Comparison", formatValue: String, color: "09" },
};
export default function SeriesKey(): ReactElement {
  return <ChartLegend config={config} label="Comparison series" />;
}

The chart legend is a wrapping list of series names and swatches. It accepts the same complete registry as the drawing and an ordered subset of visible keys. It works outside the chart container, including in ChartPanel's legend slot.

Use

The legend is descriptive. Selection belongs to the caller's controls. Filtering preserves each series' palette slot and pattern because appearance resolves against the complete registry. Line swatches show dash patterns; bar swatches show the drawing's fill pattern. The operational palette has nine slots; labels and patterns distinguish series when colors coincide or forced colors are active.

Use mark="point" with ScatterChart. Its circles, squares and triangles follow the complete registry’s solid, dashed and dotted patterns, so filtering preserves each series’ marker shape.

Examples

Series key

import { ChartLegend } from "@bosunkit/components/chart-legend";
import type { ChartRegistry } from "@bosunkit/components/chart-container";
import type { ReactElement } from "react";

export const description: string =
  "A standalone key keeps each series' registry color and pattern when only a subset is visible.";
const config: ChartRegistry = {
  primary: { label: "Primary", formatValue: String, color: "02" },
  comparison: { label: "Comparison", formatValue: String, color: "09" },
};
export default function SeriesKey(): ReactElement {
  return <ChartLegend config={config} label="Comparison series" />;
}

Keep series identity stable

Choose the series order deliberately and retain it across filters and refreshes. A hidden series does not cause another series to inherit its color or pattern. Place the legend close to the drawing, with complete names that remain understandable without color.

Use separate, labeled controls for visibility because this legend is descriptive. If a series represents a forecast or a derived value, explain that meaning in its label and surrounding panel. A legend does not replace axis units, the time reference or a source table for exact observations.

Props

Related

• Data visualization: scales, missing measurements and comparable evidence.
• Chart panel: titles, controls and source information.
• Sparkline: compact trends with operational integrity and forecast information.