ztd chartsHome

Relationship · Intermediate

Bubble chart

Three values at once: x, y and size. Without size it is a scatter plot.

Open in playground
Use when
How three metrics relate, such as CPC, ROAS and spend by campaign
Avoid when
Dots overlap and sizes get hard to compare

Try it

12

Bubble chart

CPC, ROAS and spend by campaign
Bubble chartBubble chart. 10 points. x from 290 to 780, y from 180 to 680.ROAS (%)Generic searchPMax allNaver shoppingInsta feedYouTube newBrand search
Bubble chart data
Brand searchx 420, y 680, size 1,800
Generic searchx 780, y 310, size 4,200
PMax allx 560, y 520, size 3,600
PMax bestx 610, y 430, size 1,500
YouTube newx 340, y 180, size 2,100
Remarketingx 290, y 610, size 900
Insta feedx 470, y 260, size 2,600
Insta reelsx 390, y 340, size 1,700
Kakao bizx 520, y 240, size 1,200
Naver shoppingx 690, y 470, size 2,900
Are the big circles efficient too?Intermediate

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Variants

Named looks for this chart. Each one is the example above with a few options or fields changed. The CLI (ztd-charts example bubble --variant <id>) and the MCP server know the same names.

From zero

CPC, ROAS and spend by campaign
Sample data

Three labels

CPC, ROAS and spend by campaign
Sample data

Code

BubbleChart.tsx
import { ChartCard, BubbleChart } from "ztd-charts";

const data = [
  {"campaign":"Brand search","cpc":420,"roas":680,"spend":1800},
  {"campaign":"Generic search","cpc":780,"roas":310,"spend":4200},
  {"campaign":"PMax all","cpc":560,"roas":520,"spend":3600},
  {"campaign":"PMax best","cpc":610,"roas":430,"spend":1500},
  {"campaign":"YouTube new","cpc":340,"roas":180,"spend":2100},
  {"campaign":"Remarketing","cpc":290,"roas":610,"spend":900},
  // … 4 more rows
];

export function Example() {
  return (
    <ChartCard number="12" title="Bubble chart" subtitle="CPC, ROAS and spend by campaign" takeaway="Are the big circles efficient too?" level="intermediate" replay>
      <BubbleChart
        data={data}
        x="cpc"
        y="roas"
        size="spend"
        label="campaign"
        xLabel="CPC (KRW)"
        yLabel="ROAS (%)"
      />
    </ChartCard>
  );
}

Props

<BubbleChart> takes these props. Rows marked Common work the same on every chart.

34 props

Prop
dataRequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]
xRequiredx valuestring | (d, i) => number
yRequiredy valuestring | (d, i) => number
sizeCircle sizestring | (d, i) => number
labelNamestring | (d, i) => string
sizeRangeRadius range (px)number[]
xLabelx axis titlestring
yLabely axis titlestring
zeroInclude 0 on the axesbooleanDefault false
maxLabelsMaximum number of dot labelsnumberDefault 6
canvasThresholdDot count that switches to canvasnumberDefault 1500
xFormatx value format"number" | "percent" | "compact" | …
yScaley axis scale. "log" spaces 1, 10, 100 and 1,000 evenly, so values spread over 1,000 times or more stay readable. Values at or below 0 are left out"linear" | "log"Default "linear"
heightCommonHeight in px. Without it, each chart picks a default that fits its widthnumber
widthCommonFixed width in px. Without it, the chart fits its parentnumber
highlightCommonItem to highlight. An index, a name, an array, or "max" | "min" | "first" | "last" | "none"number | string | (number|string)[] | "max" …
formatCommonValue format. "number" | "integer" | "percent" (values are already percents: 42 → "42%") | "ratio" (0.42 → "42%") | "compact" | "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) | "decimal" or Intl.NumberFormat options"number" | "percent" | "compact" | …
unitCommonUnit appended to values. For example "%" or "ms"string
localeCommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault "en-US"
animateCommonEntry and update animationbooleanDefault true
durationCommonAnimation length (ms)number
easingCommonMotion curve"spring" | "easeOut" | "easeInOut" | "linear"Default "spring"
staggerCommonDelay between items as they enter (ms)number
reducedMotionCommon"auto" follows the OS setting. true always turns motion offanyDefault "auto"
animateOnViewCommonPlay when the chart scrolls into viewbooleanDefault true
showLabelsCommonLabels drawn on the chart (values and names)booleanDefault true
tooltipCommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault true
syncIdCommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring
ariaLabelCommonName for screen readersstring
descriptionCommonDescription for screen readers. Built from the data when omittedstring
onHoverCommonRuns when hover or keyboard focus moves to another item(e: ChartEvent | null) => void
onClickCommonRuns on click, Enter or Space(e: ChartEvent) => void
replayKeyCommonReplays the entry animation when it changesstring | number
themeCommonChanges theme tokens for this chart onlyPartial<ChartTheme>

Above 1,500 items it draws on a canvas. Axes and labels stay SVG.

Also in Relationship