Highcharts Demo

author(s): Torstein Hønsi

by bluthcy

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

caption {
	padding-bottom: 5px;
	font-family: 'Verdana';
	font-size: 14pt;
	font-weight: bold;
	color:#555555;
}

table {
	font-family: 'Verdana';
	font-size: 12pt;
	color:#555555;              
	border-collapse: collapse;
	border: 3px solid #CCCCCC;
	margin: 2px auto;	
}

tr {
  	border-bottom: 2px solid #EEEEEE;
}

th {
	border-left: 2px solid #EEEEEE;
	border-right: 2px solid #EEEEEE;
	padding: 12px 15px;
	border-collapse: collapse;
}

th[scope="col"] {
	background-color: #ffffee;
}

th[scope="row"] {
	background-color: #f0fcff;
	text-align:left;
}

td {
  	border-left: 2px solid #EEEEEE;
  	border-right: 2px solid #EEEEEE;
  	padding: 12px 15px;
  	border-collapse: collapse;
}

JavaScript

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
    Highcharts.stockChart('container', {
        chart: {
            description: 'Chart shows Apple stock prices from mid 2008 to mid 2015. It shows steady growth with one significant peak lasting through most of 2012 before normalizing.'
        },

        title: {
            text: 'Apple Stock Price 2008 to 2015'
        },

        subtitle: {
            text: 'Accessible stock chart demo'
        },

        rangeSelector: {
            selected: 1
        },

        navigator: {
            series: {
                description: 'Overview series for navigation' // The navigator series could be confusing to screen reader users.
            }
        },

        series: [{
            name: 'AAPL',
            data: data,
            type: 'areaspline',
            tooltip: {
                valueDecimals: 2
            }
        }]
    });

});