Problem with dataMin, dataMax updating

[lourens]

Hi,

I have an application where I need to update the content depending on the current time axis width and yaxis dataMin, dataMax values.
The application needs to update the yaxis extrema depending on the current yAxis dataMin, dataMax values. But it seems that the dataMin, dataMax values
are not updated immediately. The problem only occurs if I define a (simple) seriesType of my own, in the jsfiddle it simply draws a line between the
first visible data point to the last.

In the attached jsfiddle:
* run it
* select the "1y" range

https://jsfiddle.net/lourensm/abkur9mn/

Look at the output at the bottom:
The dataMin, dataMax values are not uptodate in the afterSetExtremes event callback. After setExtremes they do become correct.

My expected behavior for the fiddle is that for any selected time range, the minimum, maximum y values just fit inside the graph.

Could you help me please?

Lourens

[dominik.c]

Hello lourens!

We appreciate you reaching out to us!

I'm not sure if I understood you correctly. Do you want to draw a line in your chart from the maximum value that is currently displayed to the minimum one?

I've checked if the afterSetExtremes event is enough to solve your issue and it works fine. The extremes are updated correctly inside this function. Demo: https://jsfiddle.net/BlackLabel/qLyf6w7g/

Best regards!

[lourens]

Thanks, so far. I succeeded in getting and setting extremes in simple cases, but, when I add a seriesType to my graph,
yaxis.getExtremes after a yaxis.setExtremes does not seem to give correct dataMin, dataMax values. i will try to add code to your fiddle, so that you can verify my problem.

[lourens]

I did not succeed in adding a simple seriesType into your fiddle. The point is I really want to understand what happens when in
highcharts.
In my fiddle for example there is code:

Code: Select all

let series = chart.series[0];
let linkedExtremes = series.yAxis.getExtremes();
let [dataMin1, dataMax1] = [linkedExtremes.dataMin, linkedExtremes.dataMax];
series.yAxis.setExtremes(dataMin1, dataMax1);
linkedExtremes = series.yAxis.getExtremes();
let [dataMin2, dataMax2] = [linkedExtremes.dataMin, linkedExtremes.dataMax];

I would expect dataMin1 to be equal to dataMin2 here. You can see in the output of my fiddle that they are not.

In my real bigger application I can more or less use the dataMin, dataMax value of getExtremes, but only if I take care of
having redraw = true in some intermediate calls without really understanding why.

I also seem to notice that possibly because I define multiple Highchart event callbacks, when I debug the application, when the code gets to a Highcharts fireEvent call,
the javascript runtime seems to jump back to a previous point in the code. I may come back with an example if I can isolate a situation.

My application looks nice, but I cannot manage to minimize redraw operations, leading to less than optimal performance.

Maybe I should postpone trying to optimize my application for now and later try to understand the Highcharts internals better.
Thanks.

[dominik.c]

Hi again!

Thanks for explaining your issue so precisely!

SetExtremes method fires just after render time and as opposed to this event we've got afterSetExtremes event which fires after the final min and max values are computed and corrected for minRange. And which is very important - the new user set minimum and maximum values can be found by event.min and event.max. These reflect the axis minimum and maximum in axis values. The actual data extremes are found in event.dataMin and event.dataMax.

API references:
https://api.highcharts.com/highcharts/x ... etExtremes
https://api.highcharts.com/class-refere ... etExtremes

Best regards!

[lourens]

Thanks for trying to clarify the situation. I do understand the distinction between setExtremes and afterSetExtremes. I have a callback for
afterSetExtremes of the xAxis. In that call I need the values of the yAxis dataMin, dataMax.

It would have helped me to know when the yAxis dataMin, dataMax values will be updated. Probably if I add another callback
for yAxis.afterSetExtremes.

I notice that after I explicitly do a yAxis.setExtremes call, the result of yAxis.getExtremes provides the updated dataMin, dataMax values.
But doing chart.redraw() does not.

A work around for me is, do a dummy yAxis, setExtremes(), after that, the dataMin, dataMax of yAxis.getExtremes is uptodate and
again, now using the correct dataMin, dataMax, do setExtremes again.
(see https://jsfiddle.net/lourensm/abkur9mn/, where I added the workaround) Again, what I am interested in, is what is shown after selecting "1y".

i would like to understand when dataMin and dataMax get updated precisely. By what calls, apparently by yAxis.setExtremes, but not by chart.redraw().
Can I force a recalculation after the data changes?

[sebastian.h]

Hi lourens,

It seems to me that the best way is to find in the source code where dataMin, dataMax, setExtremes occur and analyze this part.
https://code.highcharts.com/stock/highstock.src.js

Best regards.

[lourens]

Thanks for the suggestion. I started looking at the source, got distracted by getting used to typescript. If I get any insight, I will add my findings here.

[sebastian.h]

Hi,

Highcharts also use TypeScript but it's converted to JS.
If you want to look at TS file try to download our library and then search TS folder.

Feel free to ask if you have any questions.
Best regards.