angularhighchartsangular-highcharts

How to set rangeSelector min max dynamicly multiple times in angular highcharts?


I want to set the range of a angular highstock chart by clicking onanother component table or button.

Simple example, for selecting range T1 or T2 with setExtremes does not work: (https://stackblitz.com/edit/angular-ivy-49z46k?file=src%2Fapp%2Fapp.component.ts)

In the next example I try to set the min max direct on the xAxis[0].min =value. Sometimes it works twice but when you click multiple times it stops interacting.

https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update-5pd6yy?file=src%2Fapp%2Fapp.component.ts


Solution

  • You have two mistakes in your code:

    1. this in your chartCallback function points to a chart, use an arrow function to use component context.
    2. setExtremes needs to be called on this.chart.xAxis[0], not this.chart.xAxis

      chartCallback = (chart: Highcharts.Chart) => {
        this.chart = chart;
      }
    
      changeRange(min, max){
        this.chart.xAxis[0].setExtremes(
          min,
          max
        );
      }
    

    Live demo: https://stackblitz.com/edit/angular-ivy-dxjl2c