<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highstock Example</title>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
}
</style>
</head>
<body>
<script src="../../code/highstock.js"></script>
<script src="../../code/modules/data.js"></script>
<script src="../../code/modules/exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {
// create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'ohlc',
name: 'AAPL Stock Price',
data: data,
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
});
});
</script>
</body>
</html>Hi, this is my first post on stack so plz correct if wrong. I wish to know how do I access the properties of highstock chart in the above example. eg. if i want to set the 'selected' property of 'rangeselector' externally through code how to do it. Any help will be highly appreciated.
Thanks
You can:
const chart = Highcharts.stockChart('container', {...});
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
load event: Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
this.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
}
}
},
...
});
Highcharts.stockChart('container', {
...
}, function(chart) {
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
Live demo: http://jsfiddle.net/BlackLabel/3L7uvm4n/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.chart