PhiaUi.Components.Data.ChartAnnotation (phia_ui v0.1.17)

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>

Summary

Functions

chart_annotation_band(assigns)

Renders a shaded rectangular region between two values.

chart_annotation_line(assigns)

Renders a horizontal or vertical reference line with optional label.

chart_annotation_point(assigns)

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

Functions

chart_annotation_band(assigns)

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(assigns)

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(assigns)

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.