Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) { // split the data set into ohlc and volume var ohlc = [], volume = [], dataLength = data.length, // set the allowed units for data grouping groupingUnits = [[ 'week', // unit name [1] // allowed multiples ], [ 'month', [1, 2, 3, 4, 6] ]], i = 0; for (i; 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 ]); } // create the chart Highcharts.stockChart('container', { rangeSelector: { selected: 1 }, title: { text: 'AAPL Historical' }, yAxis: [{ labels: { align: 'right', x: -3 }, title: { text: 'OHLC' }, height: '60%', lineWidth: 2, resize: { enabled: true } }, { labels: { align: 'right', x: -3 }, title: { text: 'Volume' }, top: '65%', height: '35%', offset: 0, lineWidth: 2 }], tooltip: { split: true }, series: [{ type: 'candlestick', name: 'AAPL', data: ohlc, dataGrouping: { units: groupingUnits } }, { type: 'column', name: 'Volume', data: volume, yAxis: 1, dataGrouping: { units: groupingUnits } }] }); });
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