ScatterChart

Scatter plots for visualizing correlations between two variables. Add a size dimension to create bubble charts, or categories for colored groupings.

Playground

Experiment with different settings:

Props

Midnight

opacity

0.7

showGrid

OffOn

minSize

Code

<ScatterChart
  data={data}
  theme="midnight"
  opacity={0.7}
  showGrid
  minSize={6}
/>

Bubble Chart

Add a sizeKey to create a bubble chart where point size represents a third dimension:

tsx

<ScatterChart
  data={data}
  xKey="price"
  yKey="quantity"
  sizeKey="revenue"
  theme="midnight"
  xLabel="Price ($)"
  yLabel="Quantity"
/>

Grouped by Category

Add a categoryKey to color points by category:

North

South

East

West

tsx

<ScatterChart
  data={data}
  xKey="price"
  yKey="quantity"
  categoryKey="region"
  theme="midnight"
  xLabel="Price ($)"
  yLabel="Quantity"
/>

With Annotations

Add reference lines and areas to highlight thresholds:

Logarithmic Scale

Use xScaleType="log" and/or yScaleType="log" for data with exponential distributions. This is ideal for visualizing data like revenue vs employees, where values span multiple orders of magnitude.

tsx

<ScatterChart
  data={companies}
  xKey="revenue"
  yKey="employees"
  sizeKey="valuation"
  xScaleType="log"
  yScaleType="log"
  theme="midnight"
  xLabel="Revenue ($)"
  yLabel="Employees"
/>

Click Events

Handle clicks on data points:

tsx

<ScatterChart
  data={data}
  xKey="price"
  yKey="quantity"
  theme="midnight"
  onPointClick={({ data, index, value }) => {
    console.log('Clicked point:', data, 'at index', index);
  }}
/>

Props

Prop	Type	Default	Description
`data*`	`T[]`	-	Data array
`xKey*`	`keyof T`	-	Key for X-axis values
`yKey*`	`keyof T`	-	Key for Y-axis values
`sizeKey`	`keyof T`	-	Key for bubble size (creates bubble chart)
`categoryKey`	`keyof T`	-	Key for categories (creates colored groups)
`width`	`number`	`500`	Chart width
`height`	`number`	`400`	Chart height
`theme*`	`ThemeName`	-	Theme name
`xLabel`	`string`	-	X-axis label
`yLabel`	`string`	-	Y-axis label
`xScaleType`	`'linear' \| 'log'`	`'linear'`	X-axis scale type
`yScaleType`	`'linear' \| 'log'`	`'linear'`	Y-axis scale type
`minSize`	`number`	`6`	Minimum point size
`maxSize`	`number`	`30`	Maximum point size
`opacity`	`number`	`0.7`	Point opacity
`showGrid`	`boolean`	`true`	Show grid lines
`formatX`	`(value: number) => string`	-	X-axis value formatter
`formatY`	`(value: number) => string`	-	Y-axis value formatter
`onPointClick`	`(event: DataPointClickEvent) => void`	-	Click handler for data points
`renderTooltip`	`(props: TooltipRenderProps) => ReactNode`	-	Custom tooltip renderer
`annotations`	`Annotation[]`	-	Reference lines and areas