rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

What is the difference b/w `update` and `setExtremes`?

What is the difference b/w [update](https://api.highcharts.com/class-refere ... xis#update) and [setExtremes](https://api.highcharts.com/class-refere ... etExtremes) i.e.
code1: `chart.xAxis[0].update({min: newMin, max: newMax})` and
code2: `chart.xAxis[0].setExtremes(newMin, newMax)`
?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: What is the difference b/w `update` and `setExtremes`?

Hi there,

Thank you for contacting us!

The setExtremes function allows you only to manipulate the min/max values of a given axis, while the update method permits you to do much more than just that. With that method, you can change/add/remove any property that's available on an Axis, such as min, max, labels, ticks, etc.

If you need to manipulate just the extremes of an axis, the setExtremes function might be a bit better in terms of performance, but if you have to perform more changes, then I'd suggest using the update method.

I hope that I have made everything clear, but in case of any other questions, please do not hesitate to contact us anytime,
Best regards!
Kamil Musiałowski
Highcharts Developer
rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

Re: What is the difference b/w `update` and `setExtremes`?

Hello,
Thanks for replying back.

[afterSetExtremes](https://api.highcharts.com/highcharts/x ... etExtremes) is called after `chart.xAxis[0].setExtremes(newMin, newMax)` is executed. My question: Is `afterSetExtremes` called after `chart.xAxis[0].update({min: newMin, max: newMax})` is executed?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: What is the difference b/w `update` and `setExtremes`?

Yes, it is executed after the xAxis.update. In fact, it is executed every time when the extremes change for a given axis. Not only by updating the min/max options, but also for zooming, adding or changing the data, etc.
Kamil Musiałowski
Highcharts Developer
rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

Re: What is the difference b/w `update` and `setExtremes`?

Ok. Both are same as far as axis extremes are concerned. I found 1 extremely minor difference b/w `update` and `setExtremes` is that: `event.userMin` and `event.userMax` are `undefined` in case of `update` and `event.userMin` and `event.userMax` are equal to `event.min` and `event.max`. See fiddle https://jsfiddle.net/y0m98Lao/2/
rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

Re: What is the difference b/w `update` and `setExtremes`?

Aim: Upon clicking on reset-zoom button, I want chart to not reset to default axis extremes but want to set axis extremes to a manual range.

Example steps:
1. I have a chart whose yAxis ranges from [0, 250].
2. Now, I zoom into a certain range.
3. Then upon clicking on reset-zoom button, by default, highcharts will set axis extremes to [0, 250].
4. Instead, upon clicking on reset-zoom button, I want to set axis extremes to say [100, 200].
5. I want some time-lag of 0.5 sec b/w clicking on reset-zoom button and setting of axis extremes to [100, 200].

I tried this - Manually set axis extremes in [events.selection](https://api.highcharts.com/highcharts/c ... .selection) - See [fiddle](https://jsfiddle.net/m7wpjLr3/).

The issue is that both step-3 and step-4 both are executed; You can see 'afterSetExtremes' being called twice. I want only step-4 to get executed. Is there a way to stop setting of axis extremes to default range done internally by highcharts upon clicking on reset-zoom?

Also, my team is also considering: Disable the default reset-zoom button completely and instead create a custom reset-button. And the click hander of new button will have its own step-5 logic. In that way highcharts firing axis update to default range will not be in picture altogether. I was looking at viewtopic.php?t=44055#p155883.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: What is the difference b/w `update` and `setExtremes`?

Hi there,

In that case, I think that creating a custom reset zoom button might be the best idea. What's been said in the topic that you have linked in a previous post is still relevant.

On a button click, you'll just have to define new extremes [100, 200], and maybe wrap it in a setTimeout function with a 500ms delay.

Let me know once you have any questions, or encounter some issues while implementing that,
Regards!
Kamil Musiałowski
Highcharts Developer
rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

Re: What is the difference b/w `update` and `setExtremes`?

Thanks for your suggestion. I was able to implement requirements - See [fiddle](https://jsfiddle.net/3o6um2ph/1/).
rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

Re: What is the difference b/w `update` and `setExtremes`?

[Please ignore the previous update]
Thanks for your suggestion. I was able to implement requirements - See [fiddle](https://jsfiddle.net/h5nrtycs/).

Still, the UX (position, padding b/w boundary and text inside box, box width, etc) of the custom reset button is not exactly similar to default reset-zoom button - See [fiddle](https://jsfiddle.net/1s0amthp/1/). How to make the UX of custom-reset-zoom button same as that of default-reset-zoom button?
rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

Re: What is the difference b/w `update` and `setExtremes`?

In [this fiddle](https://jsfiddle.net/h5nrtycs/) mentioned in previous fiddle, if you zoom in twice and then click on reset zoom button then the custom reset-zoom-button doesn't disappear. Basically, we need a logic "If reset zoom button is already added, then don't add again". I implemented this using a simple if condition - See [fiddle](https://jsfiddle.net/rytpmwkj/).

Is there a better way to do this? A method something like `chart.getButtons(id='resetZoom')` which will be an empty array when there're no buttons currently added and a list of buttons. Does something like this exist?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: What is the difference b/w `update` and `setExtremes`?

When it comes to styling the button, I have copied the classes from the default button and added them to your custom one.

DEMO: https://jsfiddle.net/BlackLabel/yh8cdnxa/

For the custom button disappearing, I'd suggest the following. Add the custom button to the chart.resetZoomButton property, and then destroy it on every button click. Also, make sure to check - if chart.resetZoomButton exists, then don't create a new one (so that you avoid having multiple buttons on multiple zoom events).

Let me know once if you'll need any help while implementing that,
Best regards!
Kamil Musiałowski
Highcharts Developer
rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

Re: What is the difference b/w `update` and `setExtremes`?

Thanks for the `chart.resetZoomButton` suggestion. It makes implementation lot cleaner - See [fiddle](https://jsfiddle.net/xpyas73w/1/).

To update `min` and `max` for an axis, we can use `chart.xAxis[0].setExtremes(newMin, newMax)` instead of using update API `chart.xAxis[0].update({min: newMin, max: newMax})`. In the same way, is there a way to update `tickPositions` of an axis instead of using `chart.xAxis[0].update({tickPositions: newTickPositions})` something like `chart.xAxis[0].setTickPositions(newTickPositions)`?

Our use-case is: We have an array of tick Positions which we want to set to axis dynamically after initial render. Also, `chart.xAxis[0].update({tickPositioner: () => newTickPositions})` doesn't help because still update API is used.

Can you please explain [renderTick](https://api.highcharts.com/class-refere ... renderTick) API a bit with a small example because no example was given in the docs?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: What is the difference b/w `update` and `setExtremes`?

You're welcome! I'm glad that you like the solution.
To update `min` and `max` for an axis, we can use `chart.xAxis[0].setExtremes(newMin, newMax)` instead of using update API `chart.xAxis[0].update({min: newMin, max: newMax})`
Sure thing, and I would even recommend it over the update (if you need to update just the extremes).
In the same way, is there a way to update `tickPositions` of an axis instead of using `chart.xAxis[0].update({tickPositions: newTickPositions})` something like `chart.xAxis[0].setTickPositions(newTickPositions)`?
In that case, I think the best way of updating the ticks (if you already have an array of ticks) would be using chart.xAxis[0].update.
Can you please explain [renderTick](https://api.highcharts.com/class-refere ... renderTick) API a bit with a small example because no example was given in the docs?
Of course! This function basically allows you to render an additional tick on the chart, but allow only to input one number value. So if you would like to apply a whole array of ticks, then you would need to iterate over the new array of ticks, and execute the renderTick function on every tick. Not great in terms of performance, so again - doing the xAxis.update would be a best option for that.
DEMO: https://jsfiddle.net/BlackLabel/onje6yq3/

Do not hesitate to contact us again,
Best regards!
Kamil Musiałowski
Highcharts Developer
rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

Re: What is the difference b/w `update` and `setExtremes`?

I tried your suggestion in my project but it didn't work out-of-the-box. Seems to be a bug in my setup; I'm debugging it. Meanwhile, I have a small question:

Suppose there are multiple charts in the page and I want to get / retrieve a particular chart dynamically multiple times later after initial render. How to set index to each chart? And how to extract a particular chart using that index as mentioned at https://api.highcharts.com/class-refere ... hart#index? For simplicity, let us consider we have 2 charts - See [fiddle](https://jsfiddle.net/n0eqros9/).
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: What is the difference b/w `update` and `setExtremes`?

Every chart that you create is stored in a global object called Highcharts, which is accessible from every place in your code. Therefore I would suggest to simply log Highcharts.charts, which will get you an array of all your charts.

DEMO: https://jsfiddle.net/BlackLabel/40otgfLr/

That is the easiest solution, but if you need anything more custom, let me know!
Best regards
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”