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)}
/>Summary
Functions
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 totrue.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 tofalse.class(:string) - Defaults tonil.