Thanks in advance for your help.
My current code is here:
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts test</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<div id="container1"></div>
</div>
</div>
</div>
<script type="text/javascript">
Highcharts.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function (data) {
// Create the chart
Highcharts.stockChart('container1', {
chart: {
type: 'line'
},
title: {
text: 'AAPL Stock Price'
},
subtitle: {
text: 'Demo of placing the range selector above the navigator'
},
rangeSelector: {
floating: true,
y: -65,
verticalAlign: 'bottom'
},
navigator: {
margin: 60,
maskFill: 'rgba(158, 0, 84, 0.25)'
},
series: [{
color: '#9e0054',
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
});
</script>
</body>
</html>