reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-charts40
ComposedChart
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.

ComposedChart

Chart

Combine bars, lines, and areas on one axis to compare metrics in the same unit, such as actuals and targets.

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

Live preview

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

100%

매출 + 성장률 (막대 + 선)

영역 + 막대 + 선 결합

세션·가입·전환율

Usage examples

Combination chart

ComposedChart

PropTypeDefaultDescription
dataRequiredChartDataPoint[]—차트 데이터 배열
seriesRequiredChartSeriesDef[]—시리즈 정의 (dataKey, name, type: bar|line|area, stackId?)
xAxisKeystring"name"X축 데이터 키
heightnumber | `${number}%`300차트 높이
classNamestring—루트 요소에 붙는 CSS 클래스
showGridbooleantrue그리드 표시 여부. 실선 헤어라인
showTooltipbooleantrue툴팁 표시 여부
showLegendboolean—범례 표시 여부. 생략하면 시리즈가 둘 이상일 때만 보인다
showXAxisbooleantrueX축 표시 여부
showYAxisbooleantrueY축 표시 여부
animatebooleantruefalse면 애니메이션을 끈다. 그 외에는 prefers-reduced-motion을 따른다
marginChartMarginCHART_MARGIN차트 여백 (top/right/bottom/left)
barSizenumber—막대 두께 (px). 생략해도 24px를 넘지 않는다
radiusnumber | [number, number, number, number]CHART_MARK.barRadius막대 데이터 끝의 모서리 반경. 기준선 쪽은 각지게 둔다. 네 값을 주면 그대로 적용
strokeWidthnumberCHART_LINE_PROPS.strokeWidth선·영역 시리즈의 선 두께 (px)
fillOpacitynumberCHART_MARK.areaOpacity영역 시리즈의 채우기 불투명도. 쌓인 영역은 항상 불투명하게 그린다
yFormatter(value: number) => string—Y축 눈금 포맷터. 기본은 로케일 compact 숫자
xFormatter(value: string | number) => string—X축 눈금 포맷터
localestring—기본 숫자 포맷의 로케일. 생략하면 런타임 로케일
loadingbooleanfalse새 데이터를 기다리는 동안 현재 렌더를 흐리게 유지
accessibleTablebooleanfalse스크린 리더용 숨김 데이터 표를 함께 렌더
emptyStateReactNode—데이터가 없을 때 보일 내용. 생략하면 labels.empty
labelsComposedChartLabels—사용자 노출 문자열 (empty, summaryCaption, categoryColumn, chartName). 기본은 영어
tooltipOptionsChartTooltipContentProps—ChartTooltipContent에 그대로 넘길 옵션
legendOptionsChartLegendOptions—ChartLegendContent에 그대로 넘길 옵션. inactiveKeys에 담긴 dataKey는 범례에서 흐려지고 차트에서도 그려지지 않는다
legendTogglebooleantrue범례 칩 클릭으로 시리즈를 켜고 끕니다. legendOptions.inactiveKeys를 주면 호출자가 상태를 소유하고, onClick만 주면 클릭을 전달받으면서 차트가 상태를 유지합니다. 마지막 남은 시리즈는 꺼지지 않습니다. false면 정적 범례
syncIdstring—같은 syncId를 가진 차트끼리 툴팁과 커서를 함께 움직입니다. 범주형 차트는 행 인덱스로 맞추므로 X축 순서가 같아야 합니다
aria-labelstring—스크린 리더용 레이블. 생략하면 차트 종류와 시리즈 이름으로 만든다
aria-describedbystring—차트를 설명하는 요소의 id
View test results

테스트 커버리지

2026년 7월 9일

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

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

테스트를 추가한 뒤 `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.

PreviousBubbleChartNextRadarChart