Highcharts Demo

author(s): Torstein Hønsi

by Chitkala More

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>


<div id="progressChart" style="height: 400px; min-width: 310px"></div>

JavaScript

//Highcharts.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function (data) {
var data = [
			[1514777400000, 10],
			[1517804280000, 30],
			[1520058600000, 40],
			[1523179800000, 60],
			[1526096400000, 45],
			[1527824400000, 85],
			[1530417600000, 78],
			[1533280500000, 85],
			[1536300000000, 80],
			[1538715600000, 80],
			[1541473200000, 70],
			[1545285600000, 65],

			[1546322400000, 40],
			[1549605600000, 45],
			[1552363200000, 55],
			[1554786000000, 65],
			[1557982800000, 79],
			[1560142800000, 56],
			[1562752800000, 80],
			[1565863200000, 85],
			[1568098800000, 75],
			[1570442400000, 90],
			[1573034400000, 60],
			[1577318400000, 60],
			[1577768400000, 65],
		];
    // Create the chart
   // Highcharts.stockChart('container', {
    Highcharts.stockChart('progressChart', {
exporting: {
				buttons: {
					contextButton: {
						enabled: false
					},
					toggle: {
						align: 'right',
						y: 0,
						height: 18,
						theme: {
							'stroke-width': 1,
							stroke: 'silver',
							r: 5
						},
						text: 'Select Year',
						menuItems: [{
							text: 'All',
							onclick: function () {
								this.xAxis[0].setExtremes(Date.UTC(2018, 0, 1), Date.UTC(2019, 11, 31));
							}
						}, {
							text: '2018',
							onclick: function () {
								this.xAxis[0].setExtremes(Date.UTC(2018, 0, 1), Date.UTC(2018, 11, 31));
							}
						}, {
							text: '2019',
							onclick: function () {
								this.xAxis[0].setExtremes(Date.UTC(2019, 0, 1), Date.UTC(2019, 11, 31));
							}
						}]
					}
				}
			},

    credits: {
        enabled: false
    },
      navigator: {
        enabled: false
    },
 subtitle: {
				text: 'Status Update Dates',
				align: 'center',
				verticalAlign: 'bottom',
			},			
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				floating: true,
				y: 0,
			//	x: -90,
				padding: 3,
				itemStyle: {
					lineHeight: '14px'
				}
			},
			tooltip:...