<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highstock Example</title> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <style type="text/css"> ${demo.css} </style> <script type="text/javascript"> $(function () { $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function (data) { // create the chart $('#container').highcharts('StockChart', { rangeSelector : { selected : 1 }, title : { text : 'AAPL Stock Price' }, navigator: { enabled: false }, scrollbar: { enabled: false }, rangeSelector: { enabled: false }, exporting: { enabled: false }, credits: { enabled: false }, tooltip: { enabled: false }, chart: { height: 700, backgroundColor: '#000', borderWidth: 5, }, yAxis: { gridLineWidth: 0 }, plotOptions: { candlestick: { color: 'green', lineColor:'green', upColor: 'red', upLineColor:'red' } }, series : [{ type : 'candlestick', name : 'AAPL Stock Price', data : data, dataGrouping : { units : [ [ 'week', // unit name [12] // allowed multiples ], [ 'month', [1, 2, 3, 4, 6] ] ] } }] }); }); }); </script> </head> <body> <script src="http://cdn.hcharts.cn/highstock/highstock.js"></script> <script src="http://cdn.hcharts.cn/highstock/modules/exporting.js"></script> <div id="container" style="height: 400px; min- 310px"></div> </body> </html>