Scatter Chart
Animated WebGPU scatter, bubble, and density charts powered by ChartGPU.
Basic Chart
SearchSocial
Installation
$ pnpm dlx shadcn@latest add @chartcn/scatter-chart
Usage
import {
ChartcnScatterChart,
type ChartConfig,
} from "@/components/chart/scatter-chart";<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
Bubble size
Bubble size
Conversion
Density mode
Density mode
Requests
API Reference
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
| Prop | Type | Default |
|---|---|---|
dataKey | string | required |
sizeDataKey | string | - |
symbolSize | number | 8 |
mode | "points" | "density" | "points" |
XAxis / YAxis
| Prop | Type | Default |
|---|---|---|
scale | "value" | "log" | "value" |
min | number | - |
max | number | - |
logBase | number | - |
tickFormatter | (value: string) => ReactNode | - |
Grid
| Prop | Type | Default |
|---|---|---|
horizontal | boolean | true |
vertical | boolean | true |
Legend
| Prop | Type | Default |
|---|---|---|
position | "top" | "bottom" | "left" | "right" | "bottom" |