CODEWITHSUNDEEP
highcharts
delux
delux

Reputation: 1876

Highcharts: how to dynamically set up max value of yAxis, based on the displayed data?

I have two charts here where I was using static data for the candles. Let's consider the second Y-axis, where the max value for the few given candles is 215.

enter image description here

In the code I provided, the max value for this y Axes are set as:

yAxis: [{
   ...
}, {
    max: 215*4
}],

From where we can see that I am hardcoding the value for the max as 215*4. What I need to do is, to be able to dynamically get the current value and to multiply it by 4.

I tried it like:

yAxis: [{
    ...
}, {
    max: this.getExtremes().dataMax * 4
}],

But seems is not working and seems that this.getExtremes() can be used in the events only. So is there any way how can I accomplish to set up max value depending on the current displayed max value?

I also tried the following (but it still does not work).

render: function() {
  let yAxisExtremesVolumeMax = this.yAxis[1].getExtremes().dataMax;
  this.yAxis[1].update({
    max: yAxisExtremesVolumeMax * 4
  });
},

Anyway, I am not sure that I want to check it this way, since the render event can be called too many times, so I prefer other alternatives.

Upvotes: 0

Views: 1781

Answers (2)

Pravin
Pravin

Reputation: 25

Try to use this solution...

load: function () {
    let { min, max } = this.yAxis[1].getExtremes();
    max = max * 4;
    this.yAxis[1].setExtremes(min, max);
}

Upvotes: 1

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

Try to use this solution with the load instead the render. Doing update in the render callback creates the infinity loop. Code:

  chart: {
    events: {
      load() {
        let chart = this,
          max = chart.series[1].dataMax;

        chart.yAxis[1].update({
          max: max * 4
        })
      }
    }
  },

Demo: https://jsfiddle.net/BlackLabel/c6qjnf5z/

Upvotes: 1

Related Questions