Disabling zoom in/out animation

[atoy40]

Hello,
When you use zoom in/out button from the toolbar, it animate the graph accordingly by defining a new xaxis range. But when you load data dynamically into the zoom event handler, it's sometimes weird. For example, when you have a time data serie which only have value "before now", it's strange to have a centered zoom out (so empty graph before and after the inatial range), then another redraw when you get/update serie into the handler.

One simple solution can be to have an option to disable the zoom animation, and only call the zoom event handler. So the user can reload new datas, and if he wants, ignore the new xaxis proposed range and define the zoom "size" as he desires (because the graph will be automatically "xscaled" according to the new data set).

I hope it's understandable :)

Anthony.

[atoy40]

Another idea can be to have a beforeZoom event when you use toolbar buttons, which allow the user to return new axis range(s), so you can constraint the xaxis max value for example.

[junedchhipa]

I'm sorry - but it would be difficult for me to visualize the issue without reproducing it.
Can you please create a codepen demo for it?

If you want to disable runtime animations (update after the initial render), you can set animations. dynamicAnimation.enabled: false which will prevent all data update animations (including legend on/off series)

[atoy40]

I've tried to create a codepen.
There is a function which simulate a call to a server to get temperture data.
At startup, last 30 days are requested and then the graph is drawn.
If you zoom out, by default apex extend the xaxis range on both side, but as "futur" temperatures doesn't have any sense in this example, data return by the "server" start at xaxis new min to "now". So the range is changed again to display received data.
May be one very simple solution is to zoom out in respect of the xaxis max value set in options. So if you zoom-out and xaxis max is set "now", you compute a new range where the max value doesn't change.

Anthony.

[atoy40]

the code pen : https://codepen.io/atoy40/pen/RYexmo

[junedchhipa]

I saw your example, and I think I understood what you're trying to do.
You are trying to load new data based on how much amount the user has zoomed in. You have a valid idea of showing less number of data points for larger scales and as user scales in, you bring in new data.

So, you're calling updateSeries() function in the zoomed callback event.

I suggest you call the updateOptions() function with series as well as the new min/max values. Also, you can turn off animations in those calls, so you don't get weird drawings.
Like this:

events: {
  zoomed: function (chart, {
    xaxis
  }) {
    getServerData(xaxis.min, xaxis.max, function (temp) {
      chart.updateOptions({
        series: [{
          data: temp
        }],
        xaxis: {
          min: xaxis.min,
          max: xaxis.max
        }
      }, true, false, false)
    })
  }
}

Read more about the updateOptions() method here: https://apexcharts.com/docs/methods/#updateOptions

Also, I updated the codepen example, and it works great now.
https://codepen.io/apexcharts/pen/VGVjdG

I hope this gives some idea.

[atoy40]

I agree it's far better with updateOptions as it preserve the range.
But the real "issue" from me is I'd like to never see "futur" when I zoom out. I'd like to lock the xaxis max to a fixed value .... "now" in my case.

[junedchhipa]

Ok, then I think - a beforeZoom event is essential so you can check the current min/max and prevent zoom if you want to.
I will add that in later versions.

[junedchhipa]

beforeZoom event added which will allow you to check min/max.
The function which you define should return true to allow the next zoom event to occur.

Docs: https://apexcharts.com/docs/options/chart/events/#beforeZoom

Will be available in 1.5.5

[atoy40]

But the problem with this form of beforeZoom function (returning a bool) is you disable the zoom. But in my temperature example, I don't want to disable the zoom, i want to have the zoom extend the range in the past, for example from [now-30day, now] to [now-60days, now] (instead of [now-45days, now+15days]). So imho, the beforeZoom event must allow to alter the proposed ranges.

[junedchhipa]

I thought you want to avoid zoomout by checking the “next” range.

Ok, no problem. I will remove the boolean condition.

So, you want to set a custom range in “beforeZoom” before zoom happens.
I think, “beforeZoom” should return { xaxis, yaxis } which should be used for the next zoom event.

Correct me if I am wrong

[atoy40]

It looks good, but may be there is a simple way to handle the problem.
it's to have a paramters in xaxis (and yaxis)in addition to min/max (which are use to define the visible range) to define the maximun allowed range, so you can use it, if define, to compute a valid range at zoom requests. something like that in options :

xaxis: {
  min: now - 30*millisecondsperday // default to last month
  max: now
  extendedMin: now - 365*millisecondsperday // one year max
  extendedMax: now // never show futur
}

where you can define both, or only one (the extendedMax in my temperature example)
And another border effect of thoses parameters, you can allow panning, even where you doesn't have data (yet) for the whole "max" range. In my case where data are download lazily, I can display the last month, but then allow panning in the past and then load data for the new range.

Anthony.

[junedchhipa]

Changed the beforeZoom expected return to be a new Range instead of boolean value in this commit 89e1f55.

I have updated the docs on this page with an example
https://apexcharts.com/docs/options/chart/events/#beforeZoom

So now, you will be able to control the "next" zoom range before the actual zoom happens. If you never want the user to zoom out into "future", you can set the "xaxis.max" as demonstrated in the example.