CandlestickChart

Data Visualization

visx 기반 캔들스틱 차트.

Usage

기간별 시가·고가·저가·종가의 변동 범위를 금융형 차트로 볼 때 사용한다.

import

import { CandlestickChart } from '@mildang/design-system/Chart';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

CandlestickChart Props

Prop

Type

Default

closeKey

필수

string

지정 안 함

data

필수

TDatum[]

지정 안 함

highKey

필수

string

지정 안 함

lowKey

필수

string

지정 안 함

openKey

필수

string

지정 안 함

xKey

필수

string

지정 안 함

className

string

지정 안 함

closeLabel

string

종가

downColor

string

token('colors.info.surface.high')

downLabel

string

하락

formatValue

(value: number) => string

(value: number) => value.toLocaleString()

highLabel

string

고가

legendPosition

"bottom" | "left" | "right" | "top"

bottom

lowLabel

string

저가

margin

Partial<ChartMargin>

지정 안 함

openLabel

string

시가

showGrid

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

showXAxis

boolean

true

showYAxis

boolean

true

upColor

string

token('colors.critical.surface.high')

upLabel

string

상승

예제

기본

코드

Open in Playground

import { CandlestickChart } from '@mildang/design-system/Chart';

// 주간 매출 지수 (만원) — 상승 주는 빨강, 하락 주는 파랑 (한국 관례)
const weeklyRevenue = [
  { week: '3/2', open: 4200, high: 4550, low: 4100, close: 4480 },
  { week: '3/9', open: 4480, high: 4620, low: 4300, close: 4350 },
  { week: '3/16', open: 4350, high: 4400, low: 4050, close: 4120 },
  { week: '3/23', open: 4120, high: 4380, low: 4080, close: 4360 },
  { week: '3/30', open: 4360, high: 4520, low: 4260, close: 4500 },
  { week: '4/6', open: 4500, high: 4680, low: 4420, close: 4640 },
  { week: '4/13', open: 4640, high: 4660, low: 4380, close: 4410 },
  { week: '4/20', open: 4410, high: 4590, low: 4370, close: 4560 },
];

const CandlestickChartDefaultExample = () => (
    <CandlestickChart
      data={weeklyRevenue}
      xKey="week"
      openKey="open"
      highKey="high"
      lowKey="low"
      closeKey="close"
      showLegend
    />
  );

export default CandlestickChartDefaultExample;

Hover Tooltip (시가·고가·저가·종가)

코드

Open in Playground

import { CandlestickChart } from '@mildang/design-system/Chart';

// 주간 매출 지수 (만원) — 상승 주는 빨강, 하락 주는 파랑 (한국 관례)
const weeklyRevenue = [
  { week: '3/2', open: 4200, high: 4550, low: 4100, close: 4480 },
  { week: '3/9', open: 4480, high: 4620, low: 4300, close: 4350 },
  { week: '3/16', open: 4350, high: 4400, low: 4050, close: 4120 },
  { week: '3/23', open: 4120, high: 4380, low: 4080, close: 4360 },
  { week: '3/30', open: 4360, high: 4520, low: 4260, close: 4500 },
  { week: '4/6', open: 4500, high: 4680, low: 4420, close: 4640 },
  { week: '4/13', open: 4640, high: 4660, low: 4380, close: 4410 },
  { week: '4/20', open: 4410, high: 4590, low: 4370, close: 4560 },
];

const CandlestickChartHoverTooltipExample = () => (
    <CandlestickChart
      data={weeklyRevenue}
      xKey="week"
      openKey="open"
      highKey="high"
      lowKey="low"
      closeKey="close"
      showTooltip
    />
  );

export default CandlestickChartHoverTooltipExample;

커스텀 색상·라벨 (미국 관례: 상승 초록)

코드

Open in Playground

import { CandlestickChart } from '@mildang/design-system/Chart';
import { token } from '@mildang/styled-system/tokens';

// 주간 매출 지수 (만원) — 상승 주는 빨강, 하락 주는 파랑 (한국 관례)
const weeklyRevenue = [
  { week: '3/2', open: 4200, high: 4550, low: 4100, close: 4480 },
  { week: '3/9', open: 4480, high: 4620, low: 4300, close: 4350 },
  { week: '3/16', open: 4350, high: 4400, low: 4050, close: 4120 },
  { week: '3/23', open: 4120, high: 4380, low: 4080, close: 4360 },
  { week: '3/30', open: 4360, high: 4520, low: 4260, close: 4500 },
  { week: '4/6', open: 4500, high: 4680, low: 4420, close: 4640 },
  { week: '4/13', open: 4640, high: 4660, low: 4380, close: 4410 },
  { week: '4/20', open: 4410, high: 4590, low: 4370, close: 4560 },
];

const CandlestickChartCustomColorsAndLabelsExample = () => (
    <CandlestickChart
      data={weeklyRevenue}
      xKey="week"
      openKey="open"
      highKey="high"
      lowKey="low"
      closeKey="close"
      upColor={token('colors.green.light.400')}
      downColor={token('colors.red.light.400')}
      upLabel="Bullish"
      downLabel="Bearish"
      formatValue={(v) => `${v.toLocaleString()}만원`}
      showTooltip
      showLegend
    />
  );

export default CandlestickChartCustomColorsAndLabelsExample;

도지 (시가 = 종가)

코드

Open in Playground

import { CandlestickChart } from '@mildang/design-system/Chart';

const CandlestickChartWithDojiExample = () => (
    <CandlestickChart
      data={[
        { week: '3/2', open: 4200, high: 4550, low: 4100, close: 4480 },
        { week: '3/9', open: 4480, high: 4600, low: 4350, close: 4480 },
        { week: '3/16', open: 4480, high: 4500, low: 4200, close: 4260 },
      ]}
      xKey="week"
      openKey="open"
      highKey="high"
      lowKey="low"
      closeKey="close"
      showTooltip
      showLegend
    />
  );

export default CandlestickChartWithDojiExample;

데이터 1개

코드

Open in Playground

import { CandlestickChart } from '@mildang/design-system/Chart';

const CandlestickChartSingleDatumExample = () => (
    <CandlestickChart
      data={[{ week: '3/2', open: 4200, high: 4550, low: 4100, close: 4480 }]}
      xKey="week"
      openKey="open"
      highKey="high"
      lowKey="low"
      closeKey="close"
      showLegend
    />
  );

export default CandlestickChartSingleDatumExample;

빈 데이터

코드

Open in Playground

import { CandlestickChart } from '@mildang/design-system/Chart';

const CandlestickChartEmptyExample = () => (
    <CandlestickChart
      data={[]}
      xKey="week"
      openKey="open"
      highKey="high"
      lowKey="low"
      closeKey="close"
      showLegend
    />
  );

export default CandlestickChartEmptyExample;

반응형 (너비 자동 조정)

코드

Open in Playground

import { CandlestickChart } from '@mildang/design-system/Chart';

// 주간 매출 지수 (만원) — 상승 주는 빨강, 하락 주는 파랑 (한국 관례)
const weeklyRevenue = [
  { week: '3/2', open: 4200, high: 4550, low: 4100, close: 4480 },
  { week: '3/9', open: 4480, high: 4620, low: 4300, close: 4350 },
  { week: '3/16', open: 4350, high: 4400, low: 4050, close: 4120 },
  { week: '3/23', open: 4120, high: 4380, low: 4080, close: 4360 },
  { week: '3/30', open: 4360, high: 4520, low: 4260, close: 4500 },
  { week: '4/6', open: 4500, high: 4680, low: 4420, close: 4640 },
  { week: '4/13', open: 4640, high: 4660, low: 4380, close: 4410 },
  { week: '4/20', open: 4410, high: 4590, low: 4370, close: 4560 },
];

const CandlestickChartResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([280, 480, 720] as const).map((w) => (
        <div key={w} style={{ width: w }}>
          <div style={{ marginBottom: 4, fontSize: 11, color: '#888' }}>{w}px</div>
          <div style={{ width: w, height: 240 }}>
            <CandlestickChart
              data={weeklyRevenue}
              xKey="week"
              openKey="open"
              highKey="high"
              lowKey="low"
              closeKey="close"
              showLegend
            />
          </div>
        </div>
      ))}
    </div>
  );

export default CandlestickChartResponsiveExample;