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

Crosshair component for chart hover interaction.

Maps to Highcharts' crosshair with snap-to-point behavior.
Renders SVG guide lines that follow the pointer position,
optionally snapping to the nearest data point.

## Examples

    <.chart_crosshair
      id="my-crosshair"
      type={:x}
      chart_area={%{x: 44, y: 16, width: 340, height: 244}}
      points_json={Jason.encode!(points)}
    />

# `chart_crosshair`

## Attributes

* `id` (`:string`) (required) - Unique identifier (required for hook).
* `type` (`:atom`) - Crosshair type: vertical line (:x), horizontal (:y), or both. Defaults to `:x`. Must be one of `:x`, `:y`, or `:both`.
* `snap` (`:boolean`) - Snap crosshair to nearest data point. Defaults to `true`.
* `chart_area` (`:map`) (required) - Chart area bounds: `%{x, y, width, height}`.
* `points_json` (`:string`) - JSON array of `{px, py, label, value}` points for snap-to-point. Defaults to `"[]"`.
* `color` (`:string`) - Crosshair line color. Defaults to `"currentColor"`.
* `show_label` (`:boolean`) - Show value label at crosshair position. Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.

---

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