v1.9.0 рендерер на двух canvas, свободная прокрутка

Движок графиков для торговых приложений.

От свечей до Ренко, 95 индикаторов, 69 инструментов рисования, живые потоки с бирж и ордера на графике. Отрисовка на Canvas2D без единой зависимости. Подключите готовый ChartWidget или постройте свой интерфейс на headless-ядре Chart.

Начать Смотреть примеры

Vanilla TSReactVueSvelte

ПОДКЛЮЧЕНИЕ · BINANCE · BTCUSDT · 5m Перетаскивание прокруткаКолесо мыши масштабПеретаскивание оси масштаб оси

17: типов графиков
85: индикаторов
40: инструментов рисования
0: runtime-зависимостей
≈100kB: gzip, headless-ядро
<0.3ms: кадр при наведении, 100k баров

Лаборатория возможностей

Все возможности — на живом графике.

Выберите сцену. Каждая запускает полный 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: живой тик с 4 индикаторами на 100k баров
27ms: полный пересчёт после смены символа, 100k баров
0.32ms: прореживание LTTB, 100k → 1600 точек
<0.3ms: кадр при наведении, без роста от 500 до 100k баров

Два наложенных canvas: при наведении перерисовывается только тонкий верхний слой. Каждый рендерер обходит только бары на экране.

Жесты

Перетаскивание: прокрутка, в том числе дальше последнего бара
Колесо мыши: масштаб вокруг курсора
Щипок: масштаб на сенсорном экране
Перетаскивание вправо: старые бары подгружаются по ходу
Перетаскивание оси: масштабирование оси
Ctrl + перетаскивание: выделение рисунков
Shift + перетаскивание: измерение
Alt + щелчок: закрепление подсказки

ВиджетОдин вызов — полный торговый интерфейс: 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

ETH $3,412

SOL $148.00

BNB $582.00

ADA $0.4500

DOT $7.23

Доходность портфеля

Глубина стакана

Тепловая карта криптовалютного рынка

Атрибуция P&L

Индекс страха и жадности

Быстрый старт

Один график, пять способов подключения

Полный виджет, компонент для фреймворка или headless-движок. У всех один и тот же рендерер.

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