Bubble Chart
Extend scatter plots with a third dimension encoded as bubble size. Compare three variables simultaneously.
Usage
import { BubbleChart } from "@chartts/react"
<BubbleChart
data={countries}
x="gdpPerCapita"
y="lifeExpectancy"
size="population"
color="continent"
/>Props
| Prop | Type | Description |
|---|---|---|
| data | T[] | Array of data objects |
| x | keyof T | Key for x-axis values |
| y | keyof T | Key for y-axis values |
| size | keyof T | Key for bubble size values |
| color | keyof T | string | Color key or fixed color |
| minRadius | number | Minimum bubble radius in px. Default: 4 |
| maxRadius | number | Maximum bubble radius in px. Default: 40 |
Features
- Three-dimensional data encoding
- Automatic size scaling
- Color scales for categories
- Overlap avoidance
- Interactive tooltips per bubble
- Animated entry
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram