Bubble Chart
Three variables at once: two positions and a size.
Introduction
A bubble chart is a scatter with a third variable encoded as radius.
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
Density, clearance time and population
Centres per lakh on the x axis, median days on the y axis, bubble size is district population.
| Category | Districts |
|---|
'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: 'Districts',
data: [
{ x: 4, y: 22, r: 18 },
{ x: 6, y: 19, r: 14 },
{ x: 9, y: 14, r: 11 },
{ x: 13, y: 9, r: 7 },
],
},
],
}),
[],
);
return (
<Chart
type='bubble'
data={data}
title='Density, clearance time and population'
summary='Centres per lakh on the x axis, median days on the y axis, bubble size is district population.'
className='max-w-[640px]'
/>
);
}When to use it
Use it sparingly. Area is read even less accurately than angle, so treat bubble size as a rough weighting rather than a precise value, and never encode something the reader must read off exactly.
Usage
import { Chart } from '@/components/ui/chart';See the Charts page for the full API.