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

SVG annotation overlays for charts — reference lines, bands, and point markers.

All components render as SVG `<g>` groups. Place them inside the chart `<svg>`
after the data layer for proper z-ordering.

## Examples

    <svg viewBox="0 0 400 300">
      <%!-- ... chart data ... --%>
      <.chart_annotation_line value={75} axis={:y} scale={y_scale} x={44} width={340} label="Target" />
      <.chart_annotation_band from={40} to={60} axis={:y} scale={y_scale} x={44} width={340} />
    </svg>

# `chart_annotation_band`

Renders a shaded rectangular region between two values.

## Attributes

* `from` (`:any`) (required) - Start value.
* `to` (`:any`) (required) - End value.
* `axis` (`:atom`) - Defaults to `:y`. Must be one of `:x`, or `:y`.
* `scale` (`:any`) (required)
* `x` (`:any`) - Defaults to `0`.
* `y` (`:any`) - Defaults to `0`.
* `width` (`:any`) - Defaults to `0`.
* `height` (`:any`) - Defaults to `0`.
* `label` (`:string`) - Defaults to `nil`.
* `color` (`:string`) - Defaults to `"oklch(0.60 0.20 240 / 0.1)"`.
* `class` (`:string`) - Defaults to `nil`.

# `chart_annotation_line`

Renders a horizontal or vertical reference line with optional label.

## Attributes

* `value` (`:any`) (required) - Data value where the line is drawn.
* `axis` (`:atom`) - Which axis the value belongs to. Defaults to `:y`. Must be one of `:x`, or `:y`.
* `scale` (`:any`) (required) - Scale function `fn(value) -> pixel`.
* `x` (`:any`) - Left edge (for :y axis lines). Defaults to `0`.
* `y` (`:any`) - Top edge (for :x axis lines). Defaults to `0`.
* `width` (`:any`) - Line width (for :y axis lines). Defaults to `0`.
* `height` (`:any`) - Line height (for :x axis lines). Defaults to `0`.
* `label` (`:string`) - Defaults to `nil`.
* `color` (`:string`) - Defaults to `"oklch(0.65 0.22 30)"`.
* `dash_array` (`:string`) - SVG stroke-dasharray. Defaults to `"4 3"`.
* `class` (`:string`) - Defaults to `nil`.

# `chart_annotation_point`

Renders a circle marker with label at a specific (x, y) data coordinate.

## Attributes

* `x_value` (`:any`) (required) - Data x value.
* `y_value` (`:any`) (required) - Data y value.
* `x_scale` (`:any`) (required) - X scale function.
* `y_scale` (`:any`) (required) - Y scale function.
* `label` (`:string`) - Defaults to `nil`.
* `color` (`:string`) - Defaults to `"oklch(0.65 0.22 30)"`.
* `radius` (`:integer`) - Circle radius in px. Defaults to `4`.
* `class` (`:string`) - Defaults to `nil`.

---

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