Candlestick
Open, high, low, and close in one glance with the library's full interactive controls.
Open Source Library
Stock Charts
A free lightweight, responsive JavaScript library for creating professional stock charts with zero dependencies.
- Dependencies
- None
- Rendering
- HTML canvas
- Themes
- Dark + light
- Version
- 2.0
Interactive
Live Demo
Visualization
Multiple Chart Types
Choose the perfect visualization for your data.
Line + Light Theme
A clean closing-price view that also demonstrates the built-in light presentation.
Capabilities
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.
Developer Guide
Quick Implementation
1Installation
<link rel="stylesheet" href="stock-chart.css"> <script src="indicators.js" defer></script> <script src="patterns.js" defer></script> <script src="stockchart.js" defer></script>
2HTML Container
<div id="chart-container" style="width: 100%; height: 400px;"></div>
3Initialize 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:
[
{
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...
]
Important: Data should be sorted chronologically with the oldest data points first.
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 chartchart.resizeCanvases()Resize canvaseschart.updateConfig(newConfig)Update optionschart.destroy()Clean upReady to create beautiful stock charts?
Get started with our chart library today.