PhiaUi.Components.ScatterChart (phia_ui v0.1.17)

Copy Markdown View Source

XY scatter chart — pure SVG, zero JS.

Renders data points as circles with staggered pop-in animation.

Examples

<.scatter_chart data={[
  %{x: 10, y: 30, label: "A"},
  %{x: 25, y: 80, label: "B"},
  %{x: 60, y: 50, label: "C"}
]} />

<.scatter_chart
  data={[%{x: 1.5, y: 2.3}, %{x: 3.0, y: 5.1}, %{x: 4.5, y: 3.8}]}
  color="oklch(0.65 0.22 30)"
  dot_size={5}
/>

Summary

Functions

scatter_chart(assigns)

Functions

scatter_chart(assigns)

Attributes

  • data (:list) (required) - List of %{x, y} (and optional :label).
  • color (:string) - Dot fill color. Defaults to primary palette color. Defaults to nil.
  • dot_size (:integer) - Dot radius in px. Defaults to 4.
  • show_grid (:boolean) - Defaults to true.
  • show_labels (:boolean) - Defaults to true.
  • animate (:boolean) - Defaults to true.
  • animation_duration (:integer) - Defaults to 600.
  • theme (:map) - Chart theme overrides. Defaults to %{}.
  • show_point_labels (:boolean) - Show labels next to data points. Defaults to false.
  • symbol (:atom) - Symbol shape for data points (Recharts symbol pattern). Defaults to :circle. Must be one of :circle, :cross, :diamond, :square, :star, :triangle, or :wye.
  • active_dot (:map) - Active dot config on hover: %{r: 8, color: "red"}. nil disables. Defaults to nil.
  • id (:string) - Unique ID for the chart (auto-generated if not provided). Defaults to nil.
  • title (:string) - Chart title rendered above the visualization. Defaults to nil.
  • description (:string) - Chart description for context (rendered below title). Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.