STOCK LIBRARY
Stock chart with GUI
(async () => { // Load the dataset const data = await fetch( 'https://demo-live-data.highcharts.com/aapl-ohlcv.json' ).then(response => response.json()); // split the data set into ohlc and volume const ohlc = [], volume = [], dataLength = data.length; for (let i = 0; i < dataLength; i += 1) { ohlc.push([ data[i][0], // the date data[i][1], // open data[i][2], // high data[i][3], // low data[i][4] // close ]); volume.push([ data[i][0], // the date data[i][5] // the volume ]); } Highcharts.stockChart('container', { yAxis: [{ labels: { align: 'left' }, height: '80%', resize: { enabled: true } }, { labels: { align: 'left' }, top: '80%', height: '20%', offset: 0 }], tooltip: { shape: 'square', headerShape: 'callout', borderWidth: 0, shadow: false, positioner: function (width, height, point) { const chart = this.chart; let position; if (point.isHeader) { position = { x: Math.max( // Left side limit chart.plotLeft, Math.min( point.plotX + chart.plotLeft - width / 2, // Right side limit chart.chartWidth - width - chart.marginRight ) ), y: point.plotY }; } else { position = { x: point.series.chart.plotLeft, y: point.series.yAxis.top - chart.plotTop }; } return position; } }, series: [{ type: 'ohlc', id: 'aapl-ohlc', name: 'AAPL Stock Price', data: ohlc }, { type: 'column', id: 'aapl-volume', name: 'AAPL Volume', data: volume, yAxis: 1 }], responsive: { rules: [{ condition: { maxWidth: 800 }, chartOptions: { rangeSelector: { inputEnabled: false } } }] } }); })();
StockGeneral
Install with NPM
The official Highcharts NPM package comes with support for CommonJS and contains Highcharts, and its Stock, Maps and Gantt packages.
npm install highcharts --save
See more installation optionsDownload our library
The zip archive contains Javascript files and examples. Unzip the zip package and open index.html in your browser to see the examples.
DownloadBuy a license
You can download and try out all Highcharts products for free. Once your project/product is ready for launch, purchase a commercial license.
See License Pricing