차트 갤러리 / 한 페이지의 모든 예제

두 개의 라이브러리. 하나의 렌더링 원칙.

전체 색인을 살펴본 뒤 공개 패키지별 갤러리에 집중하세요. 차트와 구문 강조는 화면에 가까워질 때만 시작되며, 대규모 합성 작업은 명시적으로 실행할 때까지 기다립니다.

색인 / 모든 예제 한눈에 보기

차트를 시작하지 않고 전체 구성을 확인하세요.

제목, 작업량, 렌더링 범주를 간결한 목록으로 보여줍니다. 예제를 바로 열거나 한 라이브러리만 필터링할 수 있습니다.

@sixtyfold/line

Sixtyfold Line Charts

@sixtyfold/stock

Sixtyfold Stock Charts

@sixtyfold/line

Sixtyfold Line Charts

11실시간 예제

시계열 선, 계단, 범위, 양·음 막대, 누적 영역, 스트리밍 벡터와 수백만 포인트 극값 보존 LOD.

L01DATA@sixtyfold/line

피더 전류 100만 분

원본에 충실한 2년 전력 아카이브가 4,196포인트 첫 화면에서 네 개 전류 채널과 모든 명시적 간격으로 확장됩니다.

차트가 화면에 가까워지면 초기화

1,052,6401분 행

출처: FeederBW feeder_001
라이선스: CC BY 4.0

step linesParquetstaged hydrationgaps

출처 기록 라이선스 기록

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createFeederCurrentData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const feederCurrent = createFeederCurrentData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "피더 전류 100만 분" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "L1 피상 전류", type: "step-after", unit: { suffix: " A" } },
    { name: "L2 피상 전류", type: "step-after", unit: { suffix: " A" } },
    { name: "L3 피상 전류", type: "step-after", unit: { suffix: " A" } },
    { name: "L/PEN 피상 전류", type: "step-after", unit: { suffix: " A" } },
  ],
  minViewportRange: 30 * 60_000,
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(feederCurrent);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L02DATA@sixtyfold/line

200개 위치의 기상 범위

공식 시간별 필드를 원본 기반 최저–최고 밴드, 네트워크 산술 평균, 선택한 피더 온도로 표시합니다.

차트가 화면에 가까워지면 초기화

3,508,800원본 관측값

출처: FeederBW ICON-D2 weather
라이선스: CC BY 4.0

range bandmean200 locationshourly UTC

출처 기록 라이선스 기록

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createWeatherData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const weather = createWeatherData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "200개 위치의 기상 범위" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "200개 위치 최저–최고", type: "range", width: 0,
      band: { fill: 0.18, borderWidth: 0 } },
    { name: "200개 위치 평균", type: "line" },
    { name: "피더 001 기온", type: "line", width: 2 },
  ],
  lod: { mode: "adaptive", density: 0.25 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(weather);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L03SCALE@sixtyfold/line

혼합 계열 값 2천만 개

브라우저에서 생성한 여섯 신호가 선, 두 가지 계단 타이밍, 범위 데이터, 막대, 가격선을 하나의 Worker 기반 Canvas2D 화면에 결합합니다.

차트가 화면에 가까워지면 초기화

20,000,000데스크톱 값

출처: Deterministic in-browser generator
라이선스: Synthetic

≈3.33M × 6workermixed seriesadaptive LOD

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createGeneratedSignalsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const generatedSignals = createGeneratedSignalsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "혼합 계열 값 2천만 개" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "신호 A(코어)", type: "line" },
    { name: "신호 B(막대)", type: "bar" },
    { name: "신호 C(계단)", type: "step-after" },
    { name: "신호 D(범위 밴드)", type: "range" },
    { name: "신호 E(중앙 계단)", type: "step-mid" },
    { name: "신호 F(가격)", type: "line" },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(generatedSignals);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L04SCALE@sixtyfold/line

AI 데이터센터의 텔레메트리 값 600만 개

합성 150만 틱 사고 추적이 하나의 운영 타임라인에서 연산 사용률, HBM 압력, 열 여유, 스로틀 비율을 보여줍니다.

차트가 화면에 가까워지면 초기화

6,000,000데스크톱 텔레메트리 값

출처: Deterministic synthetic AI accelerator telemetry
라이선스: Synthetic

1.5M × 4accelerator fleetincident analysisadaptive LOD

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createAcceleratorTelemetryData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const acceleratorTelemetry = createAcceleratorTelemetryData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "AI 데이터센터의 텔레메트리 값 600만 개" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "연산 사용률", type: "line", width: 2,
      unit: { suffix: " %" } },
    { name: "HBM 압력", type: "line", width: 1.6,
      unit: { suffix: " %" } },
    { name: "열 여유", type: "line", width: 1.4,
      unit: { suffix: " %" } },
    { name: "스로틀 비율", type: "step-after", width: 1.2,
      unit: { suffix: " %" } },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(acceleratorTelemetry);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L05SCALE@sixtyfold/line

Transformer 추론 파이프라인의 값 800만 개

합성 5밀리초 간격 200만 개가 서빙 지연 시간을 대기열, 프리필, KV 캐시 전송, 토큰 디코딩으로 나누어 병목을 보여줍니다.

차트가 화면에 가까워지면 초기화

8,000,000데스크톱 지연 시간 값

출처: Deterministic synthetic transformer-serving trace
라이선스: Synthetic

2M × 4inference latencystacked pipelineworker rendering

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createTransformerInferenceData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const transformerInference = createTransformerInferenceData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "Transformer 추론 파이프라인의 값 800만 개" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "대기열", type: "stacked-area",
      stack: { fill: 0.68 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "프리필", type: "stacked-area",
      stack: { fill: 0.64 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "KV 캐시 전송", type: "stacked-area",
      stack: { fill: 0.6 }, unit: { suffix: " ms", decimals: 1 } },
    { name: "토큰 디코딩", type: "stacked-area",
      stack: { fill: 0.56 }, unit: { suffix: " ms", decimals: 1 } },
  ],
  lod: { mode: "pyramid", density: 0.75 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(transformerInference);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L06SCALE@sixtyfold/line

신경 전극 배열의 샘플 1천만 개

비임상 합성 30kHz 채널 8개가 채널당 125만 타임스탬프에 걸쳐 버스트 활동과 이상성 스파이크를 보존합니다.

차트가 화면에 가까워지면 초기화

10,000,000데스크톱 전극 값

출처: Deterministic synthetic non-clinical neural-array recording
라이선스: Synthetic

1.25M × 830 kHz arraybiphasic spikesinteractive legend

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createNeuralArrayData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const neuralArray = createNeuralArrayData();
const options = {
  renderMode: "auto",
  animated: true,
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "신경 전극 배열의 샘플 1천만 개" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "전극 1", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "전극 2", type: "line", width: 1.5,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "전극 3", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "전극 4", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "전극 5", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "전극 6", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "전극 7", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
    { name: "전극 8", type: "line", width: 1,
      unit: { suffix: " µV", decimals: 1 } },
  ],
  lod: { mode: "adaptive", density: 1 },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(neuralArray);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L07DRAW@sixtyfold/line

하나의 시간 축에 여러 선

서로 다른 배율의 세 신호로 공유 시간 좌표, 스플라인 보간, 대화형 범례, 십자선, 툴팁을 보여줍니다.

차트가 화면에 가까워지면 초기화

120,000계열당 샘플

출처: Deterministic waveform fixture
라이선스: Synthetic

multi-linesplinetooltipslegend

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createWaveformsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const waveforms = createWaveformsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "하나의 시간 축에 여러 선" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "주 계열", type: "line", width: 1.8 },
    { name: "보조 계열", type: "line", width: 1.4 },
    { name: "참조", type: "line", width: 1 },
  ],
  interpolation: "spline",
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(waveforms);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L08DRAW@sixtyfold/line

양방향 잔차와 관리 한계

부호가 있는 잔차 5만 개가 0 기준선에서 커지고 계단형 상·하한이 같은 시간 축에서 바뀝니다.

차트가 화면에 가까워지면 초기화

50,000부호 있는 잔차

출처: Deterministic process-control fixture
라이선스: Synthetic

signed columnszero baselinecontrol limitsstep-mid

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createResidualsData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const residuals = createResidualsData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "양방향 잔차와 관리 한계" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "잔차", type: "bar",
      bar: { baseline: 0, widthRatio: 0.82 } },
    { name: "상한", type: "step-mid", width: 1.4 },
    { name: "하한", type: "step-mid", width: 1.4 },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(residuals);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L09DRAW@sixtyfold/line

누적 영역 4개

네 개 양수 계열이 누적 기하와 공유 피라미드를 사용해 축소 과정에서도 스택 구성이 바뀌지 않습니다.

차트가 화면에 가까워지면 초기화

36,000레이어당 샘플

출처: Deterministic stacked-series fixture
라이선스: Synthetic

stacked areafour layerspyramid LODcumulative

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createStackedValuesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const stackedValues = createStackedValuesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "누적 영역 4개" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "레이어 A", type: "stacked-area", stack: { fill: 0.72 } },
    { name: "레이어 B", type: "stacked-area", stack: { fill: 0.66 } },
    { name: "레이어 C", type: "stacked-area", stack: { fill: 0.6 } },
    { name: "레이어 D", type: "stacked-area", stack: { fill: 0.54 } },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(stackedValues);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L10DRAW@sixtyfold/line

레이어 및 글로우 영역 채우기

두 선 계열이 레이어와 글로우 채우기를 비교하며 선 스트로크는 기준 값을 유지합니다.

차트가 화면에 가까워지면 초기화

64,000계열당 샘플

출처: Deterministic area-fill fixture
라이선스: Synthetic

area fillgradientglowfill-to-zero

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createFilledSeriesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const filledSeries = createFilledSeriesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  legend: {
    visible: true,
    interactive: true,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
  rangeSelector: { visible: true },

  labels: { top: { text: "레이어 및 글로우 영역 채우기" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: [
    { name: "레이어 채우기", type: "line", width: 2,
      fill: 0.3, fillEffect: "layered", fillToZero: true },
    { name: "글로우 채우기", type: "line", width: 1.2,
      fill: 0.16, fillEffect: "glow" },
  ],
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(filledSeries);

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

L11DRAW@sixtyfold/line

8개 계열 대화형 범례

시맨틱 범례가 전송된 데이터셋을 복사하거나 변형하지 않고 개별 추적선을 숨기고 복원합니다.

차트가 화면에 가까워지면 초기화

8독립 계열

출처: Deterministic multi-series fixture
라이선스: Synthetic

interactive legendvisibility APIeight seriescallbacks

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { LineChart } from "@sixtyfold/line";
import { createEightSeriesData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const eightSeries = createEightSeriesData();
const options = {
  renderMode: "auto",
  animated: true,
  lod: { mode: "adaptive", density: 0.75 },
  rangeSelector: { visible: true },

  labels: { top: { text: "8개 계열 대화형 범례" } },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
  },
  padding: { bottom: 32 },
  series: Array.from({ length: 8 }, (_, index) => ({
    name: ["계열 1","계열 2","계열 3","계열 4","계열 5","계열 6","계열 7","계열 8"][index],
    type: "line",
    width: index < 3 ? 1.8 : 1,
  })),
  legend: {
    visible: true,
    interactive: true,
    allowHideAll: false,
    position: "bottom",
    padding: { top: 12, right: 0, bottom: 24, left: 0 },
  },
};

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(eightSeries);
chart.setSeriesVisibilityCallback(({ visibility }) => {
  console.log("Visible series", visibility);
});

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

@sixtyfold/stock

Sixtyfold Stock Charts

05실시간 예제

시장 시간, 거래량, 원시 캔들 지표, 가시 범위 프로필, 가격선, 이벤트 마커를 갖춘 전용 OHLCV 렌더링.

S01MARKET@sixtyfold/stock

아카이브에서 실시간까지 정확한 BTC/USDT

명시적 데스크톱 작업이 잠긴 Binance 1분 Parquet 아카이브를 내려받고 메인 스레드 밖에서 모든 관측 캔들을 디코딩한 뒤 닫힌 분봉을 이어 받습니다. 과거 분봉은 합성하지 않습니다.

차트가 화면에 가까워지면 초기화

2017 → live정확한 관측 기록

출처: Exact Binance Spot monthly archive plus Sixtyfold live relay
사용 근거: Binance developer API-use guidance

measured Parquet downloadobserved 1m candlesexact catch-upminute-boundary polling

출처 기록 API 사용 안내

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";

import {
  exactArchiveEnd,
  loadExactBtcArchive,
  prepareBinanceLiveFeed,
} from "./same-origin-market-relay";

const canvas = document.querySelector("canvas")!;

const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "continuous",
  showVolume: true,
  labels: {
    top: { text: "아카이브에서 실시간까지 정확한 BTC/USDT" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "시가",
    "high": "고가",
    "low": "저가",
    "close": "종가",
    "change": "변동",
    "changePercent": "변동률",
    "volume": "거래량"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();

const feed = prepareBinanceLiveFeed({
  symbol: "BTCUSDT",
  afterTimestamp: exactArchiveEnd,
  relayMode: "archive-tail",
  streamEnabled: false,
  onCandles: ({ timestamp, open, high, low, close, volume }) =>
    chart.addCandles(timestamp, open, high, low, close, volume),
});
void Promise.all([
  loadExactBtcArchive(),
  feed.ready,
]).then(([archive, bootstrap]) => {
  chart.initStreaming(5_800_000);
  chart.addCandleBatches(
    [archive, bootstrap.columns],
    { initialTimeRange: "6M" },
  );
  feed.start();
});
window.addEventListener("pagehide", () => feed.close(), { once: true });

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S02MARKET@sixtyfold/stock

거래량을 포함한 채움 OHLCV

정렬된 캔들과 독립 거래량 패널이 선 차트 버킷이 아닌 유효한 OHLCV 기간으로 집계됩니다.

차트가 화면에 가까워지면 초기화

18,000생성된 캔들

출처: Deterministic OHLCV fixture
라이선스: Synthetic

filled candlesvolumeOHLCV LODhost-owned ranges

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "거래량을 포함한 채움 OHLCV" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "시가",
    "high": "고가",
    "low": "저가",
    "close": "종가",
    "change": "변동",
    "changePercent": "변동률",
    "volume": "거래량"
  },
  },
  candleStyle: "filled",
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S03MARKET@sixtyfold/stock

원시 캔들 기술 지표

SMA, EMA, Bollinger Bands, 일별 초기화 VWAP을 원시 캔들에서 계산한 뒤 활성 집계 수준에서 샘플링합니다.

차트가 화면에 가까워지면 초기화

4지표 종류

출처: Deterministic OHLCV fixture
라이선스: Synthetic

SMAEMABollingerVWAP

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "원시 캔들 기술 지표" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "시가",
    "high": "고가",
    "low": "저가",
    "close": "종가",
    "change": "변동",
    "changePercent": "변동률",
    "volume": "거래량"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setIndicators([
  { type: "sma", id: "sma-20", label: "SMA 20", period: 20 },
  { type: "ema", id: "ema-50", label: "EMA 50", period: 50 },
  { type: "bollinger", id: "bb-20", label: "BB 20", period: 20, deviation: 2 },
  { type: "vwap", id: "vwap-day", label: "VWAP", reset: "day" },
]);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S04MARKET@sixtyfold/stock

가시 범위 예상 거래량 프로필

캔들 기반 가격대별 거래량 추정치가 각 캔들의 저가–고가 범위에 OHLCV 거래량을 분배하고 가시 범위를 따릅니다.

차트가 화면에 가까워지면 초기화

48가격 행

출처: Deterministic OHLCV fixture
라이선스: Synthetic

estimated volume profilevalue areavisible rangeOHLCV

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "가시 범위 예상 거래량 프로필" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "시가",
    "high": "고가",
    "low": "저가",
    "close": "종가",
    "change": "변동",
    "changePercent": "변동률",
    "volume": "거래량"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setVolumeProfile({
  rows: 48,
  placement: "right",
  valueAreaPercent: 70,
});
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

S05MARKET@sixtyfold/stock

가격선과 타임스탬프 마커

데이터에 고정된 가격 수준과 시간순 마커가 시장 시간 탐색과 함께 컬링, 테마 적용, 동기화됩니다.

차트가 화면에 가까워지면 초기화

O(n)마커 컬링

출처: Deterministic OHLCV fixture
라이선스: Synthetic

price linesevent markersmarket timebinary culling

SOURCE / EXPANDED06 FRAMEWORK TARGETS

import { StockChart } from "@sixtyfold/stock";
import { createOhlcvData } from "./example-data";


const canvas = document.querySelector("canvas")!;
const ohlcv = createOhlcvData();
const options = {
  renderMode: "auto",
  animated: true,
  timeScale: "market",
  showVolume: true,
  labels: {
    top: { text: "가격선과 타임스탬프 마커" },
    bottom: { text: "UTC", align: "right" },
  },
  axis: {
    bottom: {
      format: {
        type: "time",
        locale: "ko-KR",
        timeZone: "UTC",
        hour12: false,
      },
    },
  },
  tooltip: {
    titleFormat: {
      type: "time",
      locale: "ko-KR",
      timeZone: "UTC",
      hour12: false,
    },
    fieldLabels: {
    "open": "시가",
    "high": "고가",
    "low": "저가",
    "close": "종가",
    "change": "변동",
    "changePercent": "변동률",
    "volume": "거래량"
  },
  },
};

const chart = new StockChart(canvas, options);
await chart.initialize();
chart.setData(ohlcv);
chart.setPriceLines([
  { id: "entry", price: 182.4, label: "진입", showAxisLabel: true },
  { id: "risk", price: 174.8, label: "위험", showAxisLabel: true },
]);
chart.setMarkers([
  { id: "release", timestamp: ohlcv.timestamp[Math.floor(ohlcv.length * 0.72)],
    position: "above",
    shape: "diamond", label: "출" },
]);
chart.setTimeRange("5D");

// Releases its worker, observers, listeners, and data references.
window.addEventListener("pagehide", () => chart.destroy(), { once: true });

다음 단계 / 같은 API로 빌드

모든 예제는 공개 API를 사용합니다.

비공개 렌더링 훅, 스크린샷 대체물, 프레임워크별 데이터 변형은 없습니다. 전체 옵션과 통합 참조를 확인하세요.

문서 열기