캔들 + 거래량

가장 작은 트레이딩 화면 — 캔들 pane 하나, 거래량 pane 하나, 십자선. 등락색은 스타일이 아니라 점의 사실이다(HistogramPoint.color).

소스

apps/examples/src/cases/candles-volume.ts — CI가 타입체크하는 실물이다.

import { PlotBuilder, browserDeps } from "@finchart/dom";
import type { HistogramPoint, OHLC } from "@finchart/core";
import { candleSeries, crosshair, histogramSeries, priceFormat, timeTicks } from "@finchart/core";
import { fixtureCandles } from "./fixture";
import { chartHost } from "./stage";

export const title = "캔들 + 거래량";
export const description =
  "가장 작은 트레이딩 화면 — 캔들 pane 하나, 거래량 pane 하나, 십자선. 등락색은 스타일이 아니라 점의 사실이다(HistogramPoint.color).";

export function mount(container: HTMLElement): () => void {
  const host = chartHost(container, 480);
  const plot = PlotBuilder.create<OHLC>(browserDeps({ autoSize: true }))
    .setSize(container.clientWidth || 900, 480)
    .setAxis({
      x: { ticks: timeTicks({ timeZone: "UTC", locale: "ko" }) },
      y: { position: "right", format: priceFormat({ compact: true, locale: "ko" }) },
    })
    .build(host);

  const candles = fixtureCandles();
  plot.mainPane.addSeries({ series: candleSeries(), data: candles, name: "가격" });

  plot.addPane({ flex: 0.35, minHeight: 60 }).addSeries({
    series: histogramSeries(),
    data: candles.map<HistogramPoint>((candle) => ({
      x: candle.x,
      y: candle.volume ?? null,
      color:
        candle.close >= candle.open
          ? "rgba(22, 163, 74, 0.45)"
          : "rgba(220, 38, 38, 0.45)",
    })),
    name: "거래량",
  });

  plot.use(crosshair({ magnet: true }));

  return Object.assign(
    () => {
      plot.destroy();
      host.remove();
    },
    { requestRender: () => plot.requestRender() },
  );
}