<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/disparity-index.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {
Highcharts.stockChart('container', {
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
yAxis: [{
height: '60%'
}, {
height: '40%',
top: '60%'
}],
series: [{
type: 'candlestick',
id: 'aapl',
name: 'AAPL Stock Price',
data: data
}, {
type: 'disparityindex',
linkedTo: 'aapl',
yAxis: 1,
params: {
period: 9
}
}]
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.