CODEWITHSUNDEEP
javascriptjqueryhighcharts
S Kumar
S Kumar

Reputation: 595

Threshold value change on click of rangeSelector in HighStock graph

I need to change the threshold value on click of rangeSelector in HighStock graph. Also, I need to change the line value inside PlotLines of y-axis.

I tried following code 

xAxis: {    
                events:{
                    setExtremes: function(e) {
                       if (e.trigger == "rangeSelectorButton" && 
                            e.rangeSelectorButton.text == "1m"){
                                  // this.threshold = 20;
                                  alert("on click of 1m range selector");
                                  // for threshold value
                                  this.threshold=20;
                                  this.series[0].plotOptions.threshold=20;
                                   this.plotOptions[0].series[0].threshold=20;
                                   this.rangeSelector.clickButton(0, true);
                                // for changing the line value of plotLines
                                this.yAxis[0].plotLines[0].value=20;

                                            }
                                    },
                            }
            },

Click here for jsfiddle link

I have put some alert to test that click on rangeSelector is working fine. I tried to change the values but the chart is not getting updated.

Any help would be really appreciated.

Upvotes: 0

Views: 317

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

Inside setExtremes, this references the xAxis object. The threshold is on the series object, so you need to get a reference to the right series.

var series = this.chart.series[0];

Then, you need to update it with the new value.

series.update({threshold: threshold}, false);

I'm passing false for the redraw parameter, since we're also going to update the plotLine, and we'll only want to redraw once.

For the plotLine, you'll need a reference to the yAxis.

var yAxis = this.chart.yAxis[0];

And, then you'll need to pass the new plotLine settings to the update method.

 yAxis.update({
     plotLines: [{
        value: threshold,
        color: 'green',
        dashStyle: 'shortdash',
        width: 2,
        label: {
             text: 'Last quarter minimum'
        }
     }]
 });

https://jsfiddle.net/w6bzohgd/3/

Upvotes: 1

Related Questions