reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-charts40
BubbleChart
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

BubbleChart

Chart

Visualize three dimensions through x and y positions and bubble size using the ScatterChart renderer.

cartesian
Related docs
bun add @reopt-ai/opt-charts
Install and import
bash
bun add @reopt-ai/opt-charts
tsx
import { BubbleChart } from "@reopt-ai/opt-charts";

Live preview

Change the width and theme, then interact with the components.

100%

Bubble Chart

Single Series

Usage examples

Bubble chart

BubbleChart

PropTypeDefaultDescription
seriesRequiredBubbleSeriesDef[]—시리즈 배열 ({ name, data, color? })
xKeystring"x"X축 데이터 키
yKeystring"y"Y축 데이터 키
sizeKeystring"size"버블 넓이로 매핑할 데이터 키
maxBubbleSizenumber400가장 큰 버블의 넓이 (px²)
minBubbleSizenumberSCATTER_DOT_AREA가장 작은 버블의 넓이 (px²). 기본은 8px 점
sizeNamestring—툴팁과 접근성 표에서 크기 값을 부르는 이름. 기본은 sizeKey
xNamestring—툴팁과 접근성 표에서 X 값을 부르는 이름. 기본은 xKey
yNamestring—툴팁과 접근성 표에서 Y 값을 부르는 이름. 기본은 yKey
heightnumber | `${number}%`300차트 높이
classNamestring—루트 요소에 붙는 CSS 클래스
showGridbooleantrue그리드 표시 여부. 실선 헤어라인
showTooltipbooleantrue툴팁 표시 여부
showLegendboolean—범례 표시 여부. 생략하면 시리즈가 둘 이상일 때만 보인다
showXAxisbooleantrueX축 표시 여부
showYAxisbooleantrueY축 표시 여부
animatebooleantruefalse면 애니메이션을 끈다. 그 외에는 prefers-reduced-motion을 따른다
marginChartMarginCHART_MARGIN차트 여백 (top/right/bottom/left)
xFormatter(value: number) => string—X축 눈금 포맷터. 기본은 로케일 compact 숫자
yFormatter(value: number) => string—Y축 눈금 포맷터. 기본은 로케일 compact 숫자
localestring—기본 숫자 포맷의 로케일. 생략하면 런타임 로케일
loadingbooleanfalse새 데이터를 기다리는 동안 현재 렌더를 흐리게 유지
accessibleTablebooleanfalse스크린 리더용 숨김 데이터 표를 함께 렌더
emptyStateReactNode—데이터가 없을 때 보일 내용. 생략하면 labels.empty
labelsBubbleChartLabels—사용자 노출 문자열 (empty, summaryCaption, seriesColumn, chartName). 기본은 영어
tooltipOptionsChartTooltipContentProps—ChartTooltipContent에 그대로 넘길 옵션
legendOptionsChartLegendOptions—ChartLegendContent에 그대로 넘길 옵션. Recharts가 산점 시리즈에 dataKey를 주지 않으므로 inactiveKeys는 dataKey가 아니라 시리즈 name으로 지정한다
legendTogglebooleantrue범례 칩 클릭으로 시리즈를 켜고 끕니다. legendOptions.inactiveKeys를 주면 호출자가 상태를 소유하고, onClick만 주면 클릭을 전달받으면서 차트가 상태를 유지합니다. 마지막 남은 시리즈는 꺼지지 않습니다. false면 정적 범례
aria-labelstring—스크린 리더용 레이블. 생략하면 차트 종류와 시리즈 이름으로 만든다
aria-describedbystring—차트를 설명하는 요소의 id
View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

BubbleChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

opt-charts

LineChart

Charts

Visualize trends and changes over time with a line chart for continuous data.

opt-charts

BarChart

Charts

Compare values across categories with a bar chart.

opt-charts

AreaChart

Charts

Display trends and time series with filled areas and optional gradients.

opt-charts

Sparkline

Charts

Show compact inline trends in stat cards, table cells, and other small spaces.

opt-charts

ScatterChart

Charts

Compare two variables in a scatter plot and optionally size points with zKey.

opt-charts

WaterfallChart

Charts

Explain changes from a starting value to a total with step bars and distinct increase, decrease, and total colors.

PreviousWaterfallChartNextComposedChart