Oopt-charts

Prop

타입

기본값

설명

data*

Candle[]

—

캔들 배열 (name, open, high, low, close)

height

number

300

차트 높이(px)

upColor

string

"var(--opt-success)"

상승 캔들 색

downColor

string

"var(--opt-danger)"

하락 캔들 색

showGrid

boolean

true

가로 그리드 표시 여부. 눈금 레이블은 항상 남는다

showLegend

boolean

true

Up/Down 범례 표시 여부

valueFormatter

(value: number) => string

—

값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷

accessibleTable

boolean

false

스크린 리더용으로 숨긴 데이터 표를 함께 렌더링

labels

CandlestickChartLabels

—

지역화 문자열 (empty·summaryCaption·chartName·periodColumn·open·high·low·close·up·down·legendAriaLabel)

locale

string

—

기본 숫자 포맷에 쓰는 locale. 생략하면 런타임 locale

loading

boolean

false

새 데이터를 불러오는 동안 현재 렌더를 흐리게 유지

emptyState

React.ReactNode

—

데이터가 없을 때 보여줄 내용. 기본은 labels.empty

className

string

—

루트 요소에 붙는 CSS 클래스

aria-label

string

—

스크린 리더용 레이블. 생략하면 차트 종류와 항목 이름으로 만든다

aria-describedby

string

—

차트를 설명하는 요소의 id

CandlestickChart

visual

Display open, high, low, and close prices in responsive candlesticks with up and down legends and keyboard focus.

100%

OHLC 시세

Up
Down

그리드 없이

컴팩트

Up
Down

테스트 커버리지

2026년 7월 9일

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

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

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

CandlestickChart Props

Prop	타입	기본값	설명
`data`*	`Candle[]`	—	캔들 배열 (name, open, high, low, close)
`height`	`number`	`300`	차트 높이(px)
`upColor`	`string`	`"var(--opt-success)"`	상승 캔들 색
`downColor`	`string`	`"var(--opt-danger)"`	하락 캔들 색
`showGrid`	`boolean`	`true`	가로 그리드 표시 여부. 눈금 레이블은 항상 남는다
`showLegend`	`boolean`	`true`	Up/Down 범례 표시 여부
`valueFormatter`	`(value: number) => string`	—	값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷
`accessibleTable`	`boolean`	`false`	스크린 리더용으로 숨긴 데이터 표를 함께 렌더링
`labels`	`CandlestickChartLabels`	—	지역화 문자열 (empty·summaryCaption·chartName·periodColumn·open·high·low·close·up·down·legendAriaLabel)
`locale`	`string`	—	기본 숫자 포맷에 쓰는 locale. 생략하면 런타임 locale
`loading`	`boolean`	`false`	새 데이터를 불러오는 동안 현재 렌더를 흐리게 유지
`emptyState`	`React.ReactNode`	—	데이터가 없을 때 보여줄 내용. 기본은 labels.empty
`className`	`string`	—	루트 요소에 붙는 CSS 클래스
`aria-label`	`string`	—	스크린 리더용 레이블. 생략하면 차트 종류와 항목 이름으로 만든다
`aria-describedby`	`string`	—	차트를 설명하는 요소의 id

Import

tsx

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