Plot bands on Y axis
(async () => { // Load the dataset const data = await fetch( 'https://demo-live-data.highcharts.com/aapl-c.json' ).then(response => response.json()); const startDate = new Date(data[data.length - 1][0]); let minRate = null, maxRate = null, date, rate, index; startDate.setMonth(startDate.getMonth() - 3); // a quarter of a year // before last data point const startPeriod = Date.UTC( startDate.getFullYear(), startDate.getMonth(), startDate.getDate() ); for (index = data.length - 1; index >= 0; index = index - 1) { date = data[index][0]; // data[i][0] is date rate = data[index][1]; // data[i][1] is stock price if (date < startPeriod) { break; // stop measuring highs and lows } if (rate > maxRate || maxRate === null) { maxRate = rate; } if (rate < minRate || minRate === null) { minRate = rate; } } // Create the chart Highcharts.stockChart('container', { rangeSelector: { selected: 1 }, title: { text: 'AAPL Stock Price' }, yAxis: { title: { text: 'Stock price' }, plotBands: [{ from: minRate, to: maxRate, color: 'rgba(68, 170, 213, 0.2)', label: { text: 'Last quarter year\'s value range' } }] }, series: [{ name: 'AAPL Stock Price', data: data, tooltip: { valueDecimals: 2 } }] }); })();
StockVarious features
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