1. Home
  2. Forum
  3. Blazor
  4. Inverted Y axis in Heatmap doesn't work when some Y labels have to be hidden due to a lack of space

Inverted Y axis in Heatmap doesn't work when some Y labels have to be hidden due to a lack of space

I have a heatmap inside a custom resizable panel with the IsInversed property set to true for the Y axis. When I resize the heatmap by making it smaller in such a way that there is not enough space for all the Y axis labels, it seems that the isInversed value is ignored and the subset of shown labels is no longer inverted.  


Below is the definition of the Heatmap Y axis,




The IsInversed value is hardcoded and set to true, so I don't think the logic I have added around the component is causing the issue.

The gifs at the following link show this behavior.


4 Replies
SS Sharon Sanchez Selvaraj Syncfusion Team July 4, 2021 03:30 PM UTC

Hi Juan,

Greetings from Syncfusion Support.

We have checked with your reported query related to HeatMap component. We would like to mention that, HeatMap requires a minimal width and height to properly render with the given labels and cell values.

And with respect to the issue you have mentioned, we suspect that you are using an older package version. And also, we have standardized the component from v19.1.0.54. So, you wouldn’t be facing these issues.

So, we would suggest you to upgrade your Syncfusion package version to resolve them.


We have provided a sample over here for your reference.


On a side note, we have some resizing issues of the HeatMap with the panel. So, we have provided a workaround to resolve the issue using an interop call. However, it will be resolved in the upcoming third weekly patch release.

Please get back to us if you need any further assistance.

Regards,

Sharon Sanchez S.



JM Justin Millard replied to Sharon Sanchez Selvaraj July 10, 2021 12:34 AM UTC

I'm facing the same issue as Juan where the Y axis doesn't properly invert when some of its labels are hidden. I'm currently working in an older version of Syncfusion Blazor (18.3.0.53) for my main project. However, it appears (based on my experimentation with sample projects) that in newer versions of SF Blazor, it doesn't even bother hiding overlapping labels on the Y axis anymore:

Is there a way to restore the behavior where certain Y axis labels will automatically hide based on the height of the chart like it did in older versions, but still maintain the expected inversion behavior?


JM Justin Millard replied to Sharon Sanchez Selvaraj July 10, 2021 12:40 AM UTC

Also, I looked at the sample project you linked to but it appeared to be behaving unusually. A set of additional rows appeared after the ones corresponding to the input data (which don't respond to the tooltip) and the Y axis labels got stretched across these rows as well which seemed to throw off their alignment with the cells.


SS Sharon Sanchez Selvaraj Syncfusion Team July 12, 2021 12:38 PM UTC

Hi Justin, 
 
Greetings from Syncfusion Support. 
 
We have checked with your query regarding “In newer versions of SF Blazor, it doesn't even bother hiding overlapping labels on the Y axis anymore” and have considered this as a bug from our end. 
 
The fix for this issue will be included in the first weekly patch release after Volume 2 SP1, which is expected to be rolled out by the month of August. 
 
Please track the below feedback link to know the status of the issue. 
 
 
And in relation to the mentioned scenario of HeatMap component with the yAxis labels(“ A set of additional rows appeared after the ones corresponding to the input data (which don't respond to the tooltip) and the Y axis labels got stretched across these rows as well which seemed to throw off their alignment with the cells.”), we would like to mention that, the labels have rendered based upon the data source values. Please refer to the modified sample here for your reference, where you can see that the label values are proper. 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
 
Sharon Sanchez S. 


Loader.
Up arrow icon