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

Color scale legend component for charts.

Renders an SVG gradient bar with min/max labels, showing the color mapping
for a continuous data range. Inspired by eCharts `visualMap` UI control.

## Examples

    <.visual_map
      min={0}
      max={100}
      colors={["oklch(0.95 0.05 240)", "oklch(0.55 0.22 240)"]}
    />

    <.visual_map
      min={0}
      max={500}
      colors={["oklch(0.95 0.05 120)", "oklch(0.70 0.15 60)", "oklch(0.50 0.25 0)"]}
      orientation={:vertical}
      width={20}
      height={200}
    />

# `visual_map`

## Attributes

* `min` (`:any`) - Minimum data value. Defaults to `0`.
* `max` (`:any`) - Maximum data value. Defaults to `100`.
* `colors` (`:list`) - List of OKLCH color strings for the gradient (min → max). Defaults to `["oklch(0.95 0.05 240)", "oklch(0.55 0.22 240)"]`.
* `orientation` (`:atom`) - Gradient orientation. Defaults to `:horizontal`. Must be one of `:horizontal`, or `:vertical`.
* `width` (`:any`) - Width in pixels. Defaults based on orientation. Defaults to `nil`.
* `height` (`:any`) - Height in pixels. Defaults based on orientation. Defaults to `nil`.
* `show_labels` (`:boolean`) - Show min/max labels. Defaults to `true`.
* `label_format` (`:any`) - Optional format function for labels. Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

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