Highstock Demo

author(s): Wojciech Chmiel

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/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/stock/indicators/ema.js"></script>
<script src="https://code.highcharts.com/stock/indicators/apo.js"></script>


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

JavaScript

/* Highcharts.getJSON('https://www.highcharts.com/samples/data/aapl-ohlc.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],
		];
    Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Stock Price'
        },

        legend: {
            enabled: true
        },

        yAxis: [{
            height: '55%'
        }, {
            height: '40%',
            top: '60%'
        }],

        plotOptions: {
            series: {
                showInLegend: true
            }
        },

        series: [{
            type: 'candlestick',
            id: 'aapl',
            name: 'AAPL Stock Price',
            data: data
        }, {
            type: 'apo',
            linkedTo: 'aapl',
            yAxis: 1,
            color: 'grey',
            lineWidth: 2,
            params: {
                periods: [10, 20]
            }
        }]

    });
/* }); */