Javascript Stock Charts

A lightweight, responsive JavaScript library for creating professional financial charts with zero dependencies. Create beautiful stock charts with candlestick and line views in a simple JavaScript class.

➡️ View Live Demo - See the full capabilities in action with interactive examples and documentation.

Installation

NPM

npm install stock-chart

Yarn

yarn add stock-chart

Usage

ES6 Modules

import { StockChart } from '@trading-simulator/stock-chart';
import '@trading-simulator/stock-chart/dist/stock-chart.css';

// Initialize chart
const chart = new StockChart('chart-container', {
  data: ohlcData,
  ticker: 'AAPL',
  darkMode: true
});

CommonJS

const { StockChart } = require('@trading-simulator/stock-chart');
require('@trading-simulator/stock-chart/dist/stock-chart.css');

// Initialize chart
const chart = new StockChart('chart-container', {
  data: ohlcData,
  ticker: 'AAPL',
  darkMode: true
});

Data Format

The library expects an array of objects with the following structure:

const data = [
  {
    t: 1675209600000,  // Timestamp in milliseconds
    open: 180.68,      // Opening price
    high: 187.12,      // Highest price
    low: 179.26,       // Lowest price
    close: 185.38,     // Closing price
    volume: 4235600    // Volume
  },
  // More data points...
];

Configuration Options

const chart = new StockChart('container', {
  // Required
  data: ohlcData,  // Array of { t, open, high, low, close, volume }
  ticker: 'NVDA',  // Stock symbol (displayed as watermark)
  chartType: 'candlestick', // or 'line'
  darkMode: false // Enable dark mode
});

API Methods

drawCharts()

Manually trigger a redraw of the chart.

chart.drawCharts();

resizeCanvases()

Resize the chart when container dimensions change.

chart.resizeCanvases();

updateConfig()

Apply changes to configuration options.

chart.config.darkMode = true;
chart.updateConfig();
chart.drawCharts();

destroy()

Clean up event listeners and remove the chart.

chart.destroy();

Features

• Multiple Chart Types - Toggle between candlestick and line chart views
• Interactive Navigation - Drag to pan, scroll to zoom, touch-friendly controls
• Responsive Design - Automatically adapts to any screen size from mobile to desktop
• Dark/Light Mode - Built-in theme switching
• Real-Time OHLC Display - Shows precise price data on hover
• Customizable - Configure colors, watermarks, and display options
• Volume Visualization - Volume bars displayed below price data
• Fullscreen Mode - Expand charts with a single click

Browser Support

• Modern browsers with HTML5 Canvas support
• Chrome, Firefox, Safari, Edge
• Mobile browsers on iOS and Android

License

MIT

Development

For bug reports and feature requests, please open an issue on the GitHub repository.

Created by simul8or