Beautiful Stock Charts Made Simple
A Free lightweight, responsive JavaScript library for creating professional financial 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
