Scatter Chart
The relationship between two numeric variables.
Introduction
Each point carries an x and a y, so a scatter is the chart for a correlation rather than a comparison.
All chart types share one component. Installation, the palette, and the reason every chart ships with a screen-reader data table are on the Charts page.
Example
Centre density against clearance time
Each point is a district: centres per lakh residents on the x axis, median days to clear on the y axis.
| Category | Centres |
|---|
'use client';
import { useMemo } from 'react';
import { Chart } from '@/components/ui/chart';
const MONTHS = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'];
const DISTRICTS = ['Pune', 'Nashik', 'Nagpur', 'Thane', 'Solapur'];
export default function Component() {
const data = useMemo(
() => ({
datasets: [
{
label: 'Centres',
data: [
{ x: 4, y: 22 },
{ x: 6, y: 19 },
{ x: 7, y: 24 },
{ x: 9, y: 14 },
{ x: 11, y: 12 },
{ x: 13, y: 9 },
],
},
],
}),
[],
);
return (
<Chart
type='scatter'
data={data}
title='Centre density against clearance time'
summary='Each point is a district: centres per lakh residents on the x axis, median days to clear on the y axis.'
className='max-w-[640px]'
/>
);
}When to use it
Use it when the reader is asking whether two things move together. Say what a single point represents — in the example below, each point is a district.
Usage
import { Chart } from '@/components/ui/chart';See the Charts page for the full API.