Beautiful Stock Charts Made Simple

A Free lightweight, responsive JavaScript library for creating professional stock charts with zero dependencies.

Live Demos

Multiple Chart Types

Choose the perfect visualization for your data

Key Features

Everything you need for stunning financial visualizations

Multiple Chart Types

Candlestick, line charts, and more with a single click

Interactive Controls

Intuitive drag to pan, scroll to zoom, and touch controls

Responsive Design

Automatically adapts to any screen size or device

Dark/Light Mode

Built-in theme switching with a single click

High Performance

Optimized canvas rendering for large datasets

Fullscreen Mode

Expand your charts to fullscreen with a single click

Quick Implementation

Get started in minutes with just a few lines of code:

1. Installation
<script src="stock-chart.js"></script>
<link rel="stylesheet" href="stock-chart.css">
2. HTML Container
<div id="chart-container" style="width: 100%; height: 400px;"></div>
3. Initialize the Chart
// Sample OHLC data
const data = [
  { t: 1675209600000, open: 180.68, high: 187.12, 
    low: 179.26, close: 185.38, volume: 4235600 },
  // ... more data points
];

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

Data Format

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

Important: Data should be sorted chronologically with the oldest data points first. 
[
  {
    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

Customize your charts to fit your needs:

Option Type Default Description
data Array - Array of OHLC data objects (required)
ticker String 'NVDA' Stock symbol to display
chartType String 'line' 'line' or 'candlestick'
darkMode Boolean false Enable dark mode
Available Methods
  • chart.drawCharts() Redraw chart
  • chart.resizeCanvases() Resize canvases
  • chart.updateConfig(newConfig) Update options
  • chart.destroy() Clean up

Ready to create beautiful stock charts?

Get started with our chart library today

Download View on GitHub