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

Multi-chart synchronization wrapper.

Inspired by Recharts' `syncId` — coordinates crosshair, brush, and tooltip
state across multiple charts. Charts within the same `sync_id` group share
pointer position and zoom state.

## Examples

    <.chart_sync id="sync-1" sync_id="group-a">
      <.xy_chart ... />
    </.chart_sync>

    <.chart_sync id="sync-2" sync_id="group-a">
      <.xy_chart ... />
    </.chart_sync>

# `chart_sync`

## Attributes

* `id` (`:string`) (required) - Unique element ID (required for phx-hook).
* `sync_id` (`:string`) (required) - Group ID — charts with same sync_id share state.
* `sync_mode` (`:atom`) - What to synchronize: crosshair position, brush range, or both. Defaults to `:crosshair`. Must be one of `:crosshair`, `:brush`, or `:both`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

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