Heatmap Min value issue for negative value

[vishalpawar048]

Hi,

I am facing an issue in the min value in the heatmap.

I tried to change the min value to -30 which works fine and gives min value -40 on legend.

https://stackblitz.com/edit/react-npfup8?file=index.js

But if I change the min value to -1 it gives me -120 on the legend which is strange. I need to set min value -1 or at least -10 which is closer to -1.

https://stackblitz.com/edit/react-uz8o6e?file=index.js

How can we can fix it. Could you please help?

Thanks

[jakub.j]

Thanks for contacting us!

There are two ways, to achieve what you wanted to do. You can either use colorAxis.tickPositions or colorAxis.tickPositioner, depending on your choice.

#1 tickPositions - you can set the exact ticks manually on the color axis
Demo: https://stackblitz.com/edit/react-gkambn?file=index.js

#2 tickPositioner - if you need to calculate the positions automatically based on some conditions
Demo: https://stackblitz.com/edit/react-ebl2mo?file=index.js

Let me know if that was what you were looking for!
Best regards
Jakub

[vishalpawar048]

Hi Jakub,

Thanks for the quick response.

Actually, can we just pass min values and the heatmap will take care of other values? In our use case that one will be the ideal solution rather than calculating tickPosions or tick and interval in case of tickPositioners.

Our data will be dynamic and there will be data with ranges of 0 to 1, -1 to 1000, 10 to 50, -10 to 80000, -2.5 to 20 etc.

With your solution, we need to calculate all tick values every time the data changes.

[jakub.j]

Hey,

I prepared a solution for you, so that the tick is calculated based on the data itself.
I use dataMin and dataMax to determine the first tick and the increment values and round them up to 10.

Demo: https://stackblitz.com/edit/react-8pxn9f?file=index.js

Best regards
Jakub

[vishalpawar048]

Hi Jakub,

Thanks for the solution. It works but just one problem. We need to restrict the tickAmount to 5 as per the stops in colorAxis. But with the above solution, the tickAmount is changing with the data change.

[jakub.j]

Hey,

I changed the solution a little, so that you can have 5 stops and still rounded values.

Demo: https://stackblitz.com/edit/react-4v4ftm?file=index.js

Best regards
Jakub

[vishalpawar048]

Now facing another issue with this solution.

https://stackblitz.com/edit/react-d1cmo1?file=index.js


As you can see value and color breaks are not aligned. And sometimes only 4 tickAmound displayed. PFA

[jakub.j]

Hey,

I modified the solution once again, now on chart load, I update the colorAxis stops based on the positions set in the colorAxis.tickPositioner.
I also change the rounding logic, so that, if min and max value on the colorAxis difference is below 40, then we round up the values up to 5, not to 10 so you shouldn't get the problem with less values.

Demo: https://stackblitz.com/edit/react-a4uxam?file=index.js

Feel free to ask any further questions!
Best regards
Jakub

[vishalpawar048]

Hi Jakub,

Thanks for the solution but in this case legend is inconsistent.

[jakub.j]

Hey,

I changed the solution so that the stops will be consistent but then you loose the ability to round up the values, because if we want to have ranges between points on color axis to be the same, we need to set the exact values like "29".

Demo: https://stackblitz.com/edit/react-zgqtjk?file=index.js

Best regards
Jakub

[vishalpawar048]

Hi Jakub,

This will also not work as the values look weird on the legend.

However, we tried another solution using startOnTick: false, and this worked in our case but there is one issue with it.

Following params works perfectly fine.

colorAxis: {
startOnTick: false,
min: 1.655668,
max: 4.92836,
}

https://stackblitz.com/edit/react-npfup8?file=index.js

But if we change min value to 0.655668 or 0.7 legend values alignment breaks.

colorAxis: {
startOnTick: false,
min: 0.655668, // this value makes problem. however if change it to 1 it works.
max: 4.92836
}

https://stackblitz.com/edit/react-mjuxbv?file=index.js

Could you please help?

[jakub.j]

Hey,

If you set colorAxis.min to 0.6 and startOnTick is false, the first value is taken as 0.6 and the next one is around 1.2 s and what startOnTick:false does is that it hides the first value and shows you the second one.

If you want to put precise values in min and max for the chart, I would recommend using colorAxis.tickPositions in which you can set the exact tick for colorAxis, see:

Demo: https://stackblitz.com/edit/react-cxkhcr?file=index.js

I hope you will find it useful
Kind regards
Jakub

[vishalpawar048]

Hi Jakub,

Thanks for the solution. This works for us. But have a minor issue. If the value is large eg. 100000 the legend labels are getting cropped. How can we fix this?

Also, is there any way we can round up 1000000 to 1M.

https://stackblitz.com/edit/react-xzpcd7?file=index.js

[jakub.j]

Hey!

I formatted the values using coloraxis.labels.formatter so that if they are over 1000 there is 'K' added to the value and over milion it adds 'M'.

Demo: https://stackblitz.com/edit/react-5awm15?file=index.js

Let me know if that was what you were looking for!
Best regards
Jakub