A free lightweight, responsive JavaScript library for creating professional stock charts with zero dependencies.
Choose the perfect visualization for your data
Everything you need for stunning financial visualizations
Candlestick, line charts, and more with a single click
Intuitive drag to pan, scroll to zoom, and touch controls
Automatically adapts to any screen size or device
Built-in theme switching with a single click
Optimized canvas rendering for large datasets
Expand your charts to fullscreen with a single click
<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><div id="chart-container" style="width: 100%; height: 400px;"></div>// 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
});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...
]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 |
chart.drawCharts()
Redraw chart
chart.resizeCanvases()
Resize canvases
chart.updateConfig(newConfig)
Update options
chart.destroy()
Clean up
Get started with our chart library today
