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

CandlestickChart

Chart

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

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

Live preview

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

100%

OHLC 시세

$90$100$110$120$1301: Open $100, High $112, Low $96, Close $108 (Up)12: Open $108, High $110, Low $101, Close $103 (Down)23: Open $103, High $115, Low $102, Close $114 (Up)34: Open $114, High $118, Low $109, Close $111 (Down)45: Open $111, High $113, Low $104, Close $106 (Down)56: Open $106, High $121, Low $105, Close $119 (Up)67: Open $119, High $124, Low $116, Close $122 (Up)78: Open $122, High $123, Low $112, Close $114 (Down)89: Open $114, High $117, Low $108, Close $116 (Up)910: Open $116, High $126, Low $115, Close $125 (Up)10
  • Up
  • Down

그리드 없이

컴팩트

901001101201301: Open 100, High 112, Low 96, Close 108 (Up)12: Open 108, High 110, Low 101, Close 103 (Down)23: Open 103, High 115, Low 102, Close 114 (Up)34: Open 114, High 118, Low 109, Close 111 (Down)45: Open 111, High 113, Low 104, Close 106 (Down)56: Open 106, High 121, Low 105, Close 119 (Up)67: Open 119, High 124, Low 116, Close 122 (Up)78: Open 122, High 123, Low 112, Close 114 (Down)89: Open 114, High 117, Low 108, Close 116 (Up)910: Open 116, High 126, Low 115, Close 125 (Up)10
  • Up
  • Down

CandlestickChart

PropTypeDefaultDescription
dataRequiredCandle[]—캔들 배열 (name, open, high, low, close)
heightnumber300차트 높이(px)
upColorstring"var(--opt-success)"상승 캔들 색
downColorstring"var(--opt-danger)"하락 캔들 색
showGridbooleantrue가로 그리드 표시 여부. 눈금 레이블은 항상 남는다
showLegendbooleantrueUp/Down 범례 표시 여부
valueFormatter(value: number) => string—값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷
accessibleTablebooleanfalse스크린 리더용으로 숨긴 데이터 표를 함께 렌더링
labelsCandlestickChartLabels—지역화 문자열 (empty·summaryCaption·chartName·periodColumn·open·high·low·close·up·down·legendAriaLabel)
localestring—기본 숫자 포맷에 쓰는 locale. 생략하면 런타임 locale
loadingbooleanfalse새 데이터를 불러오는 동안 현재 렌더를 흐리게 유지
emptyStateReact.ReactNode—데이터가 없을 때 보여줄 내용. 기본은 labels.empty
classNamestring—루트 요소에 붙는 CSS 클래스
aria-labelstring—스크린 리더용 레이블. 생략하면 차트 종류와 항목 이름으로 만든다
aria-describedbystring—차트를 설명하는 요소의 id
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

PreviousSunburstNextTimeSeriesChart