# ChartSyncProvider

> Scopes chart sync to its children, so two groups that happen to use the same `syncId` never talk to each other.

Source: https://ui.jcsoftdev.com/docs/components/chart-sync-provider

Scopes chart sync to its children, so two groups that happen to use the same
`syncId` never talk to each other. Optional: charts with the same `syncId`
already sync through a shared default store.

## Import

```ts
import { ChartSyncProvider } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/core`.

## Usage

```tsx
export const Default: Story = {};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` * | `ReactNode` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-categorygroupaxis--default)
- [Narrow](/storybook/?path=/story/charts-primitives-categorygroupaxis--narrow)
- [Default](/storybook/?path=/story/charts-inkannotations--default)
- [On Bars](/storybook/?path=/story/charts-inkannotations--on-bars)
- [On Horizontal Bars](/storybook/?path=/story/charts-inkannotations--on-horizontal-bars)
- [Narrow](/storybook/?path=/story/charts-inkannotations--narrow)
- [Brutal Preset](/storybook/?path=/story/charts-inkannotations--brutal-preset)
- [Keyboard](/storybook/?path=/story/charts-inkannotations--keyboard)
- [Downsampled](/storybook/?path=/story/charts-inkannotations--downsampled)

## Source

`packages/ui/src/charts/core/cartesian/sync.tsx`