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

ChartContainer

Chart

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

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

Live preview

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

100%

Basic Usage

ChartContainer는 Recharts ResponsiveContainer를 감싸고 접근성 속성을 지원합니다. 일반적으로 LineChart, BarChart, AreaChart 컴포넌트가 내부적으로 사용하므로 직접 사용할 필요는 없습니다.

Different Heights

height=150

height=300

ChartContainer

PropTypeDefaultDescription
childrenRequiredReactElement—Recharts 차트 컴포넌트
heightnumber | `${number}%`300차트 높이
minHeightnumber—최소 높이
aspectnumber—가로세로 비율
interactivebooleanfalse범례 버튼 등 자식 컨트롤을 접근성 트리에 노출하는 group 역할 사용
onKeyDownCaptureReact.KeyboardEventHandler<HTMLDivElement>—차트 자체 키 처리보다 먼저 실행됩니다. 차트가 활성 점에 대한 Enter를 Recharts보다 앞서 처리할 때 씁니다
loadingbooleanfalse재조회 중 현재 렌더를 흐리게 유지하고 aria-busy를 켭니다
data-opt-idstring—컨테이너를 통해 렌더하는 차트의 고유 id
data-opt-slugstring—컨테이너를 통해 렌더하는 차트의 슬러그
aria-labelstring—스크린 리더용 레이블
aria-describedbystring—차트를 설명하는 요소의 id
classNamestring—컨테이너 CSS 클래스
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

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

CalendarHeatmap

Charts

Show daily activity across a year in a GitHub-style calendar heatmap.

opt-charts

Treemap

Charts

Show hierarchical proportions as area-scaled rectangles with category colors, tooltips, titles, and keyboard focus.

opt-charts

Heatmap

Charts

Visualize row-by-column intensity while retaining table headings and values for screen readers.

opt-charts

RetentionHeatmap

Charts

Compare cohort retention using color intensity in a heatmap.

NextChartTooltip