min and max not working together in Scatter chart

[maulikbhalani]

I have tried to set min and max in my scatter chart in React JS, but it's not working.

Look at the code: https://stackblitz.com/edit/react-sgkrzf?file=Parent.js

Explanation: From parent - I am passing min={20} and max={40} to the child component.

Expected Behaviour:

=> Min and Max should apply by default, but both are not working together.
=> I want initially to apply min and max 20 and 40 respectively, than user can change range selector and on refresh, than changed value should be preserved.

For example,
=> Changing range selector (20,40) to (34,75) should be preserved after refreshing data (I mean to say calling API)

How to do this? Please modify above code and help me with the same.

Thank you.

[jakub.j]

Thanks for contacting us with your question!

Instead of min and max, use xAxis.floor and xAxis.ceiling, so that the extremes are set as desired on chart load.

Demo: https://stackblitz.com/edit/react-dcifg ... s,index.js

Feel free to ask any further questions!
Best regards
Jakub

[maulikbhalani]

Thanks for the quick reply, It works. I am just curious to know - What is the differences between (min,max) and (floor,ceiling) in Highcharts.

[jakub.j]

Hey,
You're welcome!

As the API states axis.min is the minimum value of the axis, although it can be rounded down or affected by any of those properties: floor, softMin, minPadding, minRange, series.threshold, series.softThreshold.

Axis.floor on the other hand is the minimum possible value to be automatically calculated, this also means the minimum value that can be set on chart load.

Axis.max and axis.ceiling are exactly opposite.

I hope you will find it useful
Kind regards
Jakub

[maulikbhalani]

Thank you for this explanation. It helped me a lot to understand differences and use cases.