# Scatter Chart

Animated WebGPU scatter, bubble, and density charts powered by ChartGPU.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview title="Basic Chart" name="scatter-chart-demo">
  <ChartcnExampleScatterChart />
</ComponentPreview>

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @chartcn/scatter-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @chartgpu/chartgpu
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/ui/chart.tsx" title="components/chart/chart.tsx" />

      <ComponentSource src="registry/ui/tooltip.ts" title="components/chart/tooltip.ts" />

      <ComponentSource src="registry/components/scatter-chart/scatter-chart.tsx" title="components/chart/scatter-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  ChartcnScatterChart,
  type ChartConfig,
} from "@/components/chart/scatter-chart";
```

```tsx
<ChartcnScatterChart config={chartConfig} data={data} xDataKey="cost">
  <ChartcnScatterChart.Grid />
  <ChartcnScatterChart.XAxis
    tickFormatter={(value) => `$${Number(value).toFixed(0)}`}
  />
  <ChartcnScatterChart.YAxis
    tickFormatter={(value) => `${Number(value).toFixed(1)}%`}
  />
  <ChartcnScatterChart.Legend />
  <ChartcnScatterChart.Tooltip />
  <ChartcnScatterChart.Scatter dataKey="search" sizeDataKey="impressions" />
  <ChartcnScatterChart.Scatter dataKey="social" symbolSize={10} />
</ChartcnScatterChart>
```

## Examples [#examples]

### Bubble size [#bubble-size]

<ComponentPreview title="Bubble size" name="bubble-size-scatter-chart-demo">
  <ChartcnExampleBubbleSizeScatterChart />
</ComponentPreview>

### Density mode [#density-mode]

<ComponentPreview title="Density mode" name="density-mode-scatter-chart-demo">
  <ChartcnExampleDensityModeScatterChart />
</ComponentPreview>

## API Reference [#api-reference]

### ChartcnScatterChart [#chartcnscatterchart]

| Prop        | Type                         | Default                                 |
| ----------- | ---------------------------- | --------------------------------------- |
| `data`      | `Data[]`                     | `required`                              |
| `config`    | `ChartConfig`                | `required`                              |
| `xDataKey`  | `string`                     | `required`                              |
| `children`  | `ReactNode`                  | -                                       |
| `animation` | `boolean \| AnimationConfig` | `{ duration: 650, easing: "cubicOut" }` |
| `isLoading` | `boolean`                    | `false`                                 |

### Scatter [#scatter]

| Prop          | Type                    | Default    |
| ------------- | ----------------------- | ---------- |
| `dataKey`     | `string`                | `required` |
| `sizeDataKey` | `string`                | -          |
| `symbolSize`  | `number`                | `8`        |
| `mode`        | `"points" \| "density"` | `"points"` |

### XAxis / YAxis [#xaxis--yaxis]

| Prop            | Type                           | Default   |
| --------------- | ------------------------------ | --------- |
| `scale`         | `"value" \| "log"`             | `"value"` |
| `min`           | `number`                       | -         |
| `max`           | `number`                       | -         |
| `logBase`       | `number`                       | -         |
| `tickFormatter` | `(value: string) => ReactNode` | -         |

### Grid [#grid]

| Prop         | Type      | Default |
| ------------ | --------- | ------- |
| `horizontal` | `boolean` | `true`  |
| `vertical`   | `boolean` | `true`  |

### Legend [#legend]

| Prop       | Type                                     | Default    |
| ---------- | ---------------------------------------- | ---------- |
| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` |