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

ComparisonChart

Chart

Compare categories using grouped, stacked, or mirrored chart layouts.

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

Live preview

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

100%

Grouped

Stacked

ComparisonChart

PropTypeDefaultDescription
dataRequiredChartDataPoint[]—차트 데이터 배열
seriesRequiredComparisonSeriesDef[]—비교 시리즈 정의
xAxisKeystring"name"X축 데이터 키
layout"grouped" | "stacked" | "mirrored""grouped"비교 레이아웃. mirrored는 두 번째 시리즈를 같은 기준선 아래로 그리고 눈금·툴팁은 부호 없이 읽힌다
barSizenumber—막대 두께 (px). 생략해도 24px를 넘지 않는다
radiusnumberCHART_MARK.barRadius막대 데이터 끝의 모서리 반경 (px). 쌓인 막대는 맨 위 조각만 둥글린다
heightnumber | `${number}%`300차트 높이
classNamestring—루트 요소에 붙는 CSS 클래스
showGridbooleantrue그리드 표시 여부. 실선 헤어라인
showTooltipbooleantrue툴팁 표시 여부
showLegendboolean—범례 표시 여부. 생략하면 시리즈가 둘 이상일 때만 보인다
showXAxisbooleantrueX축 표시 여부
showYAxisbooleantrueY축 표시 여부
animatebooleantruefalse면 애니메이션을 끈다. 그 외에는 prefers-reduced-motion을 따른다
marginChartMarginCHART_MARGIN차트 여백 (top/right/bottom/left)
referenceLinenumber—기준선 Y값
referenceLabelstring—기준선에 붙일 레이블
valueFormatter(value: number) => string—값 축 눈금 포맷터. 기본은 로케일 compact 숫자
categoryFormatter(value: string | number) => string—카테고리 축 눈금 포맷터
localestring—기본 숫자 포맷의 로케일. 생략하면 런타임 로케일
loadingbooleanfalse새 데이터를 기다리는 동안 현재 렌더를 흐리게 유지
accessibleTablebooleanfalse스크린 리더용 숨김 데이터 표를 함께 렌더
emptyStateReactNode—데이터가 없을 때 보일 내용. 생략하면 labels.empty
labelsComparisonChartLabels—사용자 노출 문자열 (empty, summaryCaption, categoryColumn, chartName). 기본은 영어
tooltipOptionsChartTooltipContentProps—ChartTooltipContent에 그대로 넘길 옵션
legendOptionsChartLegendOptions—ChartLegendContent에 그대로 넘길 옵션. inactiveKeys에 담긴 dataKey는 범례에서 흐려지고 차트에서도 그려지지 않는다
legendTogglebooleantrue범례 칩 클릭으로 시리즈를 켜고 끕니다. legendOptions.inactiveKeys를 주면 호출자가 상태를 소유하고, onClick만 주면 클릭을 전달받으면서 차트가 상태를 유지합니다. 마지막 남은 시리즈는 꺼지지 않습니다. false면 정적 범례
aria-labelstring—스크린 리더용 레이블. 생략하면 차트 종류와 시리즈 이름으로 만든다
aria-describedbystring—차트를 설명하는 요소의 id

컴포넌트 의존 관계

깊이
▲ USED BY (1)cohort-comparisonComparisonChart
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Blocks that use this component

opt-ui

CohortComparison

Blocks

Compare up to five cohorts across four tabs with comparison charts, retention heatmaps, and tables.

Related components

opt-charts

FunnelChart

Charts

Show stage entries, overall conversion, and drop-off between stages in a funnel.

opt-charts

SankeyChart

Charts

Draw responsive SVG flows between nodes with keyboard focus, link titles, and hover emphasis; skip links to unknown nodes.

opt-charts

ChartContainer

Charts

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

opt-charts

ChartTooltip

Charts

Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.

opt-charts

ChartLegend

Charts

Display chart legends as lists, with real buttons for interactive series toggles.

opt-charts

LineChart

Charts

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

PreviousScatterChartNextGaugeChart