HighStock Threshold value change

by Suraj Kumar

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=large-dataset.json&callback=?', function(data) {

  // Create a timer
  var start = +new Date();
  var thresholdvalue = 10;

  // Create the chart
  Highcharts.stockChart('container', {
    chart: {
      events: {
        load: function() {
          this.setTitle(null, {
            text: 'Built chart in ' + (new Date() - start) + 'ms'
          });
        }
      },
      zoomType: 'x'
    },

    rangeSelector: {

      buttons: [

        {
          type: 'day',
          count: 1,
          text: '1D'
        }, {
          type: 'day',
          count: 3,
          text: '3d'
        }, {
          type: 'week',
          count: 1,
          text: '1w'
        }, {
          type: 'month',
          count: 1,
          text: '1m'
        }, {
          type: 'month',
          count: 6,
          text: '6m'
        }, {
          type: 'year',
          count: 1,
          text: '1y'
        }, {
          type: 'all',
          text: 'All'
        }
      ],
      selected: 3
    },
    xAxis: {
      events: {
        setExtremes: function(e) {
          if (e.trigger == "rangeSelectorButton") {
            var series = this.chart.series[0];
            var yAxis = this.chart.yAxis[0];
            var threshold = thresholdvalue;
            if (e.rangeSelectorButton.text == "1m") {
              threshold = 20;
            }
             if (e.rangeSelectorButton.text == "1D") {
              threshold = 18;
            }
            series.update({
              threshold: threshold
            }, false);
            yAxis.update({
              plotLines: [{
                //value: threshold,
                value: threshold,
                color: 'green',
                dashStyle: 'shortdash',
                width: 2,
                visible: true,
                label: {
                  text: 'Last quarter minimum'
                }
              }]
            });
       ...