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

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}
    />

# `scatter_chart`

## 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.

---

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