'how to access highstock properties in this example

<!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

javascript highcharts

Solution 1:^[1]

You can:

Store a chart in a variable:

  const chart = Highcharts.stockChart('container', {...});

  chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));

Use load event:

  Highcharts.stockChart('container', {
    chart: {
      events: {
        load: function() {
          this.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
        }
      }
    },
    ...
  });

Use a callback function:

  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

https://api.highcharts.com/highcharts/chart.events.load

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ppotaczek

'how to access highstock properties in this example

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]