Composable chart legend components.
Renders as HTML (not SVG) — place below or beside the chart SVG.
Examples
<.chart_legend
items={[
%{label: "Revenue", color: "oklch(0.60 0.20 240)"},
%{label: "Cost", color: "oklch(0.65 0.22 30)"}
]}
/>
Summary
Functions
Renders a legend with color swatches and labels.
Individual legend entry with swatch and label.
Functions
Renders a legend with color swatches and labels.
Attrs
items— list of%{label, color}or%{label, color, shape}mapsposition— layout directionclass— additional CSS classes
Attributes
items(:list) (required) - List of%{label, color}maps.position(:atom) - Legend position determines layout direction. Defaults to:bottom. Must be one of:top,:bottom,:left, or:right.interactive(:boolean) - Enable click-to-toggle series visibility. Defaults tofalse.on_toggle(:string) - Event name for series toggle (receives%{"series" => label}). Defaults tonil.visible_series(:list) - List of currently visible series names. Empty means all visible. Defaults to[].active_legend(:string) - Name of the currently focused/highlighted legend item. Dims all others. Defaults tonil.enable_slider(:boolean) - Enable horizontal scrolling with chevron buttons when items overflow. Defaults tofalse.class(:string) - Defaults tonil.
Individual legend entry with swatch and label.
Attributes
label(:string) (required)color(:string) (required)shape(:atom) - Swatch shape. Defaults to:square. Must be one of:square,:circle,:line,:diamond,:star, or:triangle.interactive(:boolean) - Clickable toggle mode. Defaults tofalse.on_toggle(:string) - Event name for toggle. Defaults tonil.active(:boolean) - Whether this item is active/visible. Defaults totrue.dimmed(:boolean) - Whether this item is dimmed (active_legend elsewhere). Defaults tofalse.class(:string) - Defaults tonil.