opinion
BubbleChart
A scatter chart with a third value drawn as marker size.
ProjectsBudget (x), percent done (y), hours logged (size)
Harbour rebrandTideline mobileCrew interviewsRota exportDepot signage
Projects
In context
PortfolioWhere the money and the hours are going
PortfolioFive projects, this quarter
Harbour rebrandTideline mobileCrew interviewsRota exportDepot signage
Tideline mobile has the most hours and the second-largest budget; Crew interviews is small and behind.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
series | BubbleChartSeries[] | Yes | — |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
height | number | undefined | No | 320 |
xFormat | ((v: number) => string) | undefined | No | (v: number) => Math.round(v).toLocaleString() |
yFormat | ((v: number) => string) | undefined | No | (v: number) => Math.round(v).toLocaleString() |
trendline | boolean | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Trendline
Set trendline to fit a dashed ordinary-least-squares line per series over its real (x, y) points, drawn from the series' own min to max x.
data-rebar-* attributes
data-rebar-component="bubble-chart" on the root <figure>; data-rebar-part="trendline" on a fitted trendline.
Migrating to Ant Design
Not codemod-covered — AntD ships no chart components of its own (it recommends @ant-design/charts, a separate package built on G2Plot); there's no direct 1:1 antd component mapping for a bubble chart.