chart-0714

A high-performance WebGL-based financial charting library with TypeScript support.

Features

• High Performance Rendering: WebGL-based rendering for smooth performance with large datasets
• Chart Types: Candlestick and line chart support
• Technical Indicators:
  • Moving Averages (SMA, EMA)
  • MACD
  • RSI
  • Bollinger Bands
  • And more...
• Drawing Tools:
  • Trendlines
  • Horizontal lines
  • OHLC snap functionality (magnetic mode with Ctrl key)
• Multi-Panel Layout: Main chart and volume panels
• Themes: Dark and light theme support
• TypeScript: Fully typed for better development experience

Installation

npm install chart-0714

Development

npm run dev

Build

npm run build

Usage

import { Chart } from 'chart-0714';

// Create chart instance
const chart = new Chart({
  container: document.getElementById('chart-container'),
  theme: 'dark',
  chartType: 'candlestick'
});

// Set data
chart.setData(candleData);

// Add indicators
chart.addSMA(20);
chart.addEMA(50);

Keyboard Shortcuts

• Alt + T: Activate trendline drawing mode
• Alt + H: Create horizontal line at current mouse position
• Ctrl + Z: Undo
• Ctrl + Y: Redo
• Ctrl (hold): Enable magnetic snap mode
• ESC: Cancel current drawing tool

API Documentation

Chart Options

interface ChartOptions {
  container: HTMLElement;
  theme?: 'dark' | 'light';
  chartType?: 'candlestick' | 'line';
  candle?: {
    upColor?: string;
    downColor?: string;
  };
  background?: {
    color?: string;
  };
  grid?: {
    color?: string;
  };
  crosshair?: {
    color?: string;
  };
  priceScaleMargin?: {
    top?: number;
    bottom?: number;
  };
}

Methods

• setData(candles: Candle[]): Set chart data
• setChartType(type: ChartType): Change chart type
• setTheme(theme: 'dark' | 'light'): Change theme
• addIndicator(type: string, params?: Record<string, any>): Add indicator
• removeIndicator(id: string): Remove indicator
• dispose(): Clean up resources

License

MIT