MarketCanvas

High-performance financial charting engine — TypeScript + HTML5 Canvas

MarketCanvas is a zero-dependency* charting library built for building trading UIs. It ships a composable indicator system, smart composite signals, drawing tools, and live data adapters — all rendered directly to Canvas for maximum performance.

*Uses d3-scale/array/interpolate for math utilities only.

Features

• 50+ technical indicators across 7 categories — Trend, Momentum, Volatility, Volume, Support/Resistance, Patterns, and Composite
• Smart composite indicators — Signal Dots, Trend Confidence, Smart Money Flow, Volatility Regime, Pattern Scanner, Forecast Ribbon, Momentum Health, Auto Support/Resistance
• Smart renderers — Trend ribbon, Volatility background, Forecast cone, Momentum gauge, Risk meter, Pattern annotations, Flow chart
• Drawing tools — Trendlines, horizontal lines, rectangles, Fibonacci retracement
• Data adapters — WebSocket streaming, CSV import, REST/historical loader
• Multi-timeframe analysis — Compare signals across timeframes simultaneously
• Dashboard layout — Multiple panes with synchronized crosshair
• Dual themes — Dark (default) and Light
• Export — Save chart as PNG
• TypeScript-first — Full type definitions included (ESM + CJS)

Installation

npm install marketcanvas

Quick Start

import { Chart, registerBuiltins } from 'marketcanvas';

// Register built-in indicators
registerBuiltins();

// Create chart
const chart = new Chart('#container', {
  width: 1200,
  height: 600,
  theme: 'dark',
});

// Load OHLCV data
chart.setData([
  { time: 1700000000, open: 150, high: 155, low: 148, close: 153, volume: 1200000 },
  // ...more bars
]);

// Add an overlay indicator
chart.addIndicator({
  id: 'sma',
  name: 'SMA 20',
  params: { period: 20 },
  plots: [{ key: 'sma', color: '#2962ff', lineWidth: 1.5, type: 'line' }],
  overlay: true,
});

// Add a separate-pane indicator
chart.addIndicator({
  id: 'rsi',
  name: 'RSI 14',
  params: { period: 14 },
  plots: [{ key: 'rsi', color: '#f23645', lineWidth: 1.5, type: 'line' }],
  overlay: false,
});

Indicators

Trend

sma · ema · dema · tema · wma · hma · vwma · macd · parabolicSar · ichimoku · adx · supertrend · aroon · linearRegression

Momentum / Oscillators

rsi · stochastic · cci · williamsR · roc · momentum · tsi · ultimateOscillator · dpo · kst · trix

Volatility

bollingerBands · atr · keltnerChannel · donchianChannel · standardDeviation · historicalVolatility · bollingerPercentB · bollingerBandWidth

Volume

obv · vwap · adLine · cmf · mfi · forceIndex · easeOfMovement · nvi · volumeProfile

Support & Resistance

pivotPoints · fibonacciRetracement

Pattern Recognition

candlestickPatterns · chartPatterns · elderRay · coppockCurve · massIndex

Smart Indicators

Smart indicators are composite signals that combine multiple raw indicators into single actionable outputs.

import { signalDots, trendConfidence, volatilityRegime } from 'marketcanvas';

const signals = signalDots(bars);        // Buy/Sell dots with strength score
const trend   = trendConfidence(bars);   // 0–100 trend confidence score
const regime  = volatilityRegime(bars);  // 'low' | 'normal' | 'high' | 'extreme'

| Smart Indicator | What It Gives You | |---|---| | signalDots | Buy/Sell dots combining trend + momentum + volume | | trendConfidence | 0–100 score for how strong the current trend is | | smartMoneyFlow | Institutional buying/selling pressure | | volatilityRegime | Current market volatility regime | | autoSupportResistance | Automatically detected S/R zones | | forecastRibbon | Probabilistic price range projection | | momentumHealth | Multi-factor momentum health score | | patternScanner | Automatic chart & candlestick pattern detection |

Drawing Tools

import { DrawingManager } from 'marketcanvas';

const dm = new DrawingManager(chart);

// Activate a tool — user draws on chart with mouse
dm.setTool('trendline');
dm.setTool('horizontalLine');
dm.setTool('rectangle');
dm.setTool('fibRetracement');

// Deactivate (pointer/select mode)
dm.setTool(null);

Data Adapters

WebSocket (live streaming)

import { DataSource } from 'marketcanvas';

const ds = new DataSource(chart);
ds.connectWebSocket({
  url: 'wss://your-feed/AAPL',
  onBar: (bar) => ds.appendBar(bar),
});

CSV

import { DataSource } from 'marketcanvas';

const ds = new DataSource(chart);
await ds.loadCSV(file, {
  time: 'Date', open: 'Open', high: 'High',
  low: 'Low', close: 'Close', volume: 'Volume',
});

Themes

import { DEFAULT_THEME, LIGHT_THEME } from 'marketcanvas';

const chart = new Chart('#container', { theme: LIGHT_THEME });

// Or switch at runtime
chart.setTheme(LIGHT_THEME);
chart.setTheme(DEFAULT_THEME); // dark

Export

chart.exportImage({ format: 'png', filename: 'chart.png' });

Multi-Timeframe Analysis

import { SmartAnalysis } from 'marketcanvas';

const analysis = new SmartAnalysis(chart);
const result = analysis.runMultiTimeframe(['1D', '4H', '1H', '15m']);

// result.signals — array of MultiTimeframeSignal per timeframe
// result.consensus — overall Buy / Sell / Neutral

API Reference

| Method | Description | |---|---| | new Chart(container, options) | Create a chart instance | | chart.setData(bars) | Load full OHLCV dataset | | chart.addIndicator(def) | Add indicator by definition | | chart.removeIndicator(id) | Remove indicator | | chart.fitContent() | Zoom to fit all data | | chart.setTheme(theme) | Switch theme | | chart.on(event, handler) | Listen to chart events | | chart.exportImage(options) | Export as PNG | | chart.destroy() | Clean up all resources |

Events

chart.on('crosshair', (data) => console.log(data.bar));
chart.on('click',     (data) => console.log(data.price, data.time));
chart.on('zoom',      (viewport) => console.log(viewport));

Data Format

interface OHLCVBar {
  time:   number;  // Unix timestamp in seconds
  open:   number;
  high:   number;
  low:    number;
  close:  number;
  volume: number;
}

Build from Source

git clone https://github.com/UpadhyayAmit/marketcanvas.git
cd marketcanvas
npm install
npm run build       # outputs to dist/
npm run dev         # watch mode
npm run typecheck   # TypeScript check only

License

MIT © Amit Upadhyay