CandlestickChart

금융 OHLC(open, high, low, close) 값을 캔들 형태로 표시하는 차트 컴포넌트예요. 주식·암호화폐 같은 가격 데이터를 시각화할 때 사용해요.

출처: 문서

본문

Usage

CandlestickChart는 open, high, low, close(OHLC) 값을 캔들로 표시하는 금융 차트예요. 각 캔들은 방향에 따라 색이 정해져요. close >= open(가격 상승)인 캔들은 upColor, close < open(가격 하락)인 캔들은 downColor를 사용해요.

import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <CandlestickChart data={data} dataKey="date" />;
}

Data

CandlestickChart는 data prop으로 객체 배열을 요구해요. dataKey prop을 x축(카테고리) 값에 쓰는 키로 설정하세요. 기본적으로 차트는 각 데이터 객체의 open, high, low, close 키에서 OHLC 값을 읽어요.

import { CandlestickChart } from '@mantine/charts';

const data = [
  { date: 'Mar 01', open: 136, high: 142, low: 133, close: 140 },
  { date: 'Mar 02', open: 140, high: 145, low: 138, close: 139 },
  { date: 'Mar 03', open: 139, high: 141, low: 129, close: 131 },
];

function Demo() {
  return <CandlestickChart data={data} dataKey="date" />;
}

다른 차트와 달리 y축은 0에 고정되지 않아요. domain은 최소 low와 최대 high 값에 약간의 패딩을 더해 계산되므로 캔들이 사용 가능한 세로 공간을 채워요. domain을 수동으로 제어하려면 yAxisProps로 domain을 전달하세요.

Custom data keys

데이터가 open/high/low/close 외의 키를 사용한다면 dataKeys prop으로 매핑하세요.

Colors

upColor와 downColor prop으로 상승/하락 캔들의 색을 바꿀 수 있어요. 다른 컴포넌트처럼 theme에서 색을 참조해요(blue, red.5, orange.7 등). 유효한 CSS 색상 값도 허용돼요.

Candle width

기본적으로 캔들은 사용 가능한 카테고리 너비를 차지해요. maxCandleWidth prop으로 캔들 최대 너비(px)를 제한할 수 있어요.

import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <CandlestickChart maxCandleWidth={50} data={data} dataKey="date" />;
}

Value formatter

y축과 툴팁 안의 값을 형식화하려면 valueFormatter prop을 사용하세요. 숫자 값을 받아 형식화된 값을 반환하는 함수예요.

import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <CandlestickChart data={data} dataKey="date"
      valueFormatter={(value) => `$${value.toFixed(2)}`} />
  );
}

툴팁은 기본적으로 open, high, low, close 값을 영어 라벨로 표시해요. labels prop으로 바꿀 수 있어요.

Axis labels

xAxisLabel, yAxisLabel prop으로 축 라벨을 표시할 수 있어요.

Reference lines

referenceLines prop으로 기준선을 렌더링할 수 있어요. 기준선은 지지선과 저항선을 강조하는 데 유용해요. 각 라인은 y 데이터 값으로 위치가 정해지며 theme color와 label을 지원해요.

CandlestickChart