# `PhiaUi.Components.Data.ChartLegend`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/chart_legend.ex#L1)

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)"}
      ]}
    />

# `chart_legend`

Renders a legend with color swatches and labels.

## Attrs
- `items` — list of `%{label, color}` or `%{label, color, shape}` maps
- `position` — layout direction
- `class` — 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 to `false`.
* `on_toggle` (`:string`) - Event name for series toggle (receives `%{"series" => label}`). Defaults to `nil`.
* `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 to `nil`.
* `enable_slider` (`:boolean`) - Enable horizontal scrolling with chevron buttons when items overflow. Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.

# `chart_legend_item`

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 to `false`.
* `on_toggle` (`:string`) - Event name for toggle. Defaults to `nil`.
* `active` (`:boolean`) - Whether this item is active/visible. Defaults to `true`.
* `dimmed` (`:boolean`) - Whether this item is dimmed (active_legend elsewhere). Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*