Oopt-charts

Prop

타입

기본값

설명

children*

ReactElement

—

Recharts 차트 컴포넌트

height

number | `${number}%`

300

차트 높이

minHeight

number

—

최소 높이

aspect

number

—

가로세로 비율

interactive

boolean

false

범례 버튼 등 자식 컨트롤을 접근성 트리에 노출하는 group 역할 사용

onKeyDownCapture

React.KeyboardEventHandler<HTMLDivElement>

—

차트 자체 키 처리보다 먼저 실행됩니다. 차트가 활성 점에 대한 Enter를 Recharts보다 앞서 처리할 때 씁니다

loading

boolean

false

재조회 중 현재 렌더를 흐리게 유지하고 aria-busy를 켭니다

data-opt-id

string

—

컨테이너를 통해 렌더하는 차트의 고유 id

data-opt-slug

string

—

컨테이너를 통해 렌더하는 차트의 슬러그

aria-label

string

—

스크린 리더용 레이블

aria-describedby

string

—

차트를 설명하는 요소의 id

className

string

—

컨테이너 CSS 클래스

ChartContainer

visual

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

100%

Basic Usage

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

Different Heights

height=150

height=300

테스트 커버리지

2026년 7월 9일

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

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

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

ChartContainer Props

Prop	타입	기본값	설명
`children`*	`ReactElement`	—	Recharts 차트 컴포넌트
`height`	number \| `${number}%`	`300`	차트 높이
`minHeight`	`number`	—	최소 높이
`aspect`	`number`	—	가로세로 비율
`interactive`	`boolean`	`false`	범례 버튼 등 자식 컨트롤을 접근성 트리에 노출하는 group 역할 사용
`onKeyDownCapture`	`React.KeyboardEventHandler<HTMLDivElement>`	—	차트 자체 키 처리보다 먼저 실행됩니다. 차트가 활성 점에 대한 Enter를 Recharts보다 앞서 처리할 때 씁니다
`loading`	`boolean`	`false`	재조회 중 현재 렌더를 흐리게 유지하고 aria-busy를 켭니다
`data-opt-id`	`string`	—	컨테이너를 통해 렌더하는 차트의 고유 id
`data-opt-slug`	`string`	—	컨테이너를 통해 렌더하는 차트의 슬러그
`aria-label`	`string`	—	스크린 리더용 레이블
`aria-describedby`	`string`	—	차트를 설명하는 요소의 id
`className`	`string`	—	컨테이너 CSS 클래스

Import

tsx

import { ChartContainer } from "@reopt-ai/opt-ui";