v1.9.0 이중 캔버스 렌더러, 자유로운 이동

트레이딩 앱을 위한 차트 엔진.

캔들스틱부터 렌코까지, 95개 지표, 69개 그리기 도구, 실시간 거래소 피드와 차트 위 주문. 의존성 없이 Canvas2D로 그립니다. 완성된 ChartWidget을 바로 넣거나, 헤드리스 Chart 위에 나만의 UI를 만드세요.

시작하기 예제 둘러보기

Vanilla TSReactVueSvelte

연결 중 · BINANCE · BTCUSDT · 5m 드래그 이동스크롤 확대/축소축 드래그 눈금 조절
17
차트 유형
85
지표
40
그리기 도구
0
런타임 의존성
≈100kB
gzip, 헤드리스 코어
<0.3ms
10만 봉에서의 호버 프레임
기능 랩

모든 기능을 실시간 차트에서.

장면을 고르세요. 각 장면은 완전한 ChartWidget을 한 가지 영역이 작동하는 모습을 보여 주는 상태로 실행합니다. 그다음부터는 자유롭게 드래그하고, 그리고, 전환해 보세요.

직접 정한 레벨을 쓰는 피보나치·갠 도구, 엘리엇 파동, 하모닉 패턴, 노트, 브러시. 그림을 더블 클릭하면 설정, 오른쪽 클릭하면 메뉴가 열립니다. 알림은 추세선을 따라가고, 롱/숏 도구는 포지션 크기를 계산합니다.

화면에 보이도록 스크롤하면 실시간 차트가 시작됩니다
종목이나 시간 단위를 바꾸면 소요 시간을 측정합니다

해 보기

  • 피보나치 되돌림을 더블 클릭해 레벨을 편집하세요
  • 그림을 오른쪽 클릭하세요: 앞으로 가져오기, 그룹화, 알림 추가
  • 브러시나 경로 도구를 선택하세요. Enter를 누르면 경로가 끝납니다
chart.addDrawing({
  type: 'riskReward',               // Long/Short Position
  anchors: [entry, stop],           // { time, price } each
  options: { accountSize: 10_000, risk: 1, rewardRatio: 2 },
})
chart.addDrawingAlert(trendLine, { condition: 'crossing' })
chart.groupDrawings([fib, note], 'Swing')
차트 유형

모든 차트 유형을 페이지에서 실시간으로

각 타일은 이미지가 아니라 실제 Chart 인스턴스입니다. 드래그해 이동하고, 스크롤해 확대/축소하고, 마우스를 올려 십자선을 확인하세요. 모든 타일이 각자 반응합니다.

캔들스틱 OHLC
하이킨아시 추세
영역 종가
기준선 위 / 아래
OHLC 바 클래식
계단선 불연속
내부 구조

측정하고 문서화했으며, 확장은 자유롭게

기능 랩을 움직이는 엔진입니다. 아래의 모든 수치는 pnpm bench로 재현할 수 있습니다.

프레임 예산

0.001ms
10만 봉, 지표 4개에서 실시간 틱
27ms
종목 전환 후 전체 재계산, 10만 봉
0.32ms
LTTB 다운샘플링, 10만 → 1,600 포인트
<0.3ms
호버 프레임, 500봉부터 10만 봉까지 일정

두 캔버스를 겹쳐 쌓습니다. 호버 시에는 위쪽의 얇은 캔버스만 다시 그립니다. 모든 렌더러는 화면에 보이는 봉만 순회합니다.

제스처

드래그
이동, 마지막 봉 너머까지
스크롤
포인터를 중심으로 확대/축소
핀치
터치스크린에서 확대/축소
오른쪽으로 드래그
이동하는 동안 이전 봉을 불러옴
축 드래그
눈금 조절
Ctrl + 드래그
그림 선택
Shift + 드래그
측정
Alt + 클릭
툴팁 고정
위젯호출 한 번으로 완전한 트레이딩 UI
ChartWidget은 도구 모음, 그리기 사이드바, 관심 종목, 가격 알림, 개체 트리, 데이터 창, 리플레이, 명령 팔레트(Ctrl+K)를 제공하며, 영어와 베트남어부터 중국어, 일본어, 한국어, 아랍어까지 16개 언어를 지원합니다.
데이터어떤 시장 피드든
Binance, Coinbase, Bybit, Kraken 어댑터가 내장되어 있고, 그 밖의 피드는 WebSocketAdapter와 PollingAdapter로 연결합니다. 뒤로 스크롤하면 이전 봉을 불러오고, 끊기면 스스로 재연결하며, 이미 다른 요청으로 대체된 종목 전환은 버립니다.
트레이딩차트 위의 주문
모의 브로커가 포함된 ExecutionAdapter, 드래그로 주문 생성, 브래킷 주문, 드래그할 수 있는 손절·익절 선, 웹훅과 데스크톱 알림으로 전달되는 가격 알림.
프레임워크React, Vue, Svelte
@tradecanvas/react, /vue, /svelte는 같은 엔진을 타입이 지정된 반응형 props로 감쌉니다. 전체 Chart 인스턴스에는 ref 하나로 바로 접근할 수 있습니다.
플러그인모든 계층을 확장
증분 update()를 지원하는 사용자 지정 지표, 그리기 도구, 차트 유형, 오버레이를 전역 또는 차트별로 등록하세요.
분석차트 옆에서 백테스트
몬테카를로 밴드를 갖춘 봉 단위 Backtester와, 메인 스레드를 비워 두는 Web Worker 지표 파이프라인.
금융 차트

캔들스틱 그 너머

포트폴리오와 KPI를 위한 스파크라인, 자산 곡선, 호가 깊이, 섹터 히트맵, 워터폴, 게이지.

BTC $65,234
+2.4%
ETH $3,412
-1.2%
SOL $148.00
+5.1%
BNB $582.00
+0.8%
ADA $0.4500
-3.2%
DOT $7.23
+1.6%
포트폴리오 성과
호가 깊이
암호화폐 시장 히트맵
손익 기여도
공포·탐욕 지수
빠른 시작

같은 차트, 다섯 가지 시작 방법

완전한 위젯, 프레임워크 컴포넌트, 또는 헤드리스 엔진. 모두 하나의 렌더러를 공유합니다.

import { ChartWidget } from '@tradecanvas/chart/widget'
import { BinanceAdapter } from '@tradecanvas/chart'

new ChartWidget(document.getElementById('chart')!, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  adapter: new BinanceAdapter(),
  locale: 'en',            // 14 languages: 'vi', 'ja', 'zh'…
  trading: true,
})

지금 바로 앱에 실시간 차트를 넣어 보세요.

문서 읽기 GitHub에서 Star 주기