Resize Issue with HeatMap Chart

Hello Team ,

Need Some Demo for Heatmap Chart with resize Property , as it is not changing on my side , it is changing on browser zoom in-out , but want it on one Container in that heat map chart should resized with respect to resizing the container .

and also can you please check with these property in heatmap

multiLevelLabels: [
{
overflow: 'Trim',
categories: [
{ start: 0, end: 20, text: 'Standard Office Hours', },
{ start: 21, end: 26, text: 'Extended Office Hours' }
]
}


in multilevelLabels can we also pass Color in categories object for different categories of Object .


Please provide input on this ASAP.


Thanks


1 Reply

LD LeoLavanya Dhanaraj Syncfusion Team June 20, 2022 09:48 AM UTC

Hi Sourabh,


Greetings from Syncfusion support.


Query 1: HeatMap chart Resize issue


We understand that you want to resize the HeatMap component within a container in accordance to the container's resizing. We currently do not have direct support for your requirement. Basically, the HeatMap component auto-resizes based on the browser width. Whether you have rendered the HeatMap component within any other components or a normal div container. Please provide some additional details to check the feasibility of achieving your requirement. Based on your details, we will proceed further on this requirement.


Query 2: In multilevelLabels can we also pass color in categories object for different categories of object


We were not clear about your exact requirement with the shared details. Whether you want to change the color of multilevel labels or change the cell color based on the value? Please provide some additional details for further validation.


We have PaletteSettings support in the HeatMap component where you can set cell colors. You can also use the color property to set the text color of Multilevel label text. To know more about HeatMap component properties, refer to the below documentation link.


API: https://ej2.syncfusion.com/angular/documentation/api/heatmap/


Documentation : https://ej2.syncfusion.com/angular/documentation/heatmap-chart/getting-started/


Demo : https://ej2.syncfusion.com/angular/demos/#/bootstrap5/heatmap-chart/palette


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


Regards,

Leo Lavanya Dhanaraj


Loader.
Up arrow icon