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

Issue

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

Answered By - ppotaczek