HeatMap chart Resize issue

[Sourabh Brajesh Sharma]

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 resizing the container .

Please provide input on this ASAP.

Thanks 

[Sourabh Brajesh Sharma]

Hello Team can you also provide some addition to above thread 

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 Reply ASAP

[LeoLavanya Dhanaraj]

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

[Sourabh Sharma]

Hello Team, 

Facing some issue for Pie Chart Legend Click event . If there is any demo in which i can get no Click on Legend . 

I don't want any Legend to be Clickable . So Can you Please Send me Demo for this or suggest some Method to off the Click on Legend.

ASAP

Thank You ,

[Durga Gopalakrishnan]

Hi Sourabh,

We suggest you to specify toggleVisibility as false to disable the pie chart legend click. We have prepared sample based on your requirement. Please check with below snippet and sample.

public legendSettings: Object = {

        visible: true,

        toggleVisibility: false

    };

Sample : https://stackblitz.com/edit/angular-63vskk

API : https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/legendSettings/#togglevisibility

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Sourabh Sharma]

Hii Team,

I am having one Issue with heatmap Chart ,
Label for XAxis and YAxis
in this there is no label for XAxis and Yaxis .

And I have searched heatmapChart but not got any Properties .
What i want is below image and is there is any properties for this

and Don't want to use MultilevelLabel , it gives rectangle box , that isn't needed. 

Please Reply ASAP , Stuck in this issue from lot of days.

Thanks

[LeoLavanya Dhanaraj]

Hi Sourabh,

Based on your requirement, we have prepared an Angular HeatMap component. You can set a single label for the entire X and Y Axis using multiLevelLabel support. You can customize the axis labels using the load event to achieve your requirement.

Refer to the below code snippet.

[app.component.ts]

public load(args: ILoadedEventArgs): void {

    setTimeout(() => {

      document

        .querySelector('#container_YAxisMultiLevelLabel0')

        .getElementsByTagName('text')[0].style.writingMode = 'vertical-lr';

      document

        .getElementById('container_YAxisMultiLevelLabel0')

        .getElementsByTagName('text')[0]

        .setAttribute('x', '60');

      document

        .getElementById('container_YAxisMultiLevelLabel0')

        .getElementsByTagName('text')[0]

        .setAttribute('y', '195');

    }, 100);

}

Sample : https://stackblitz.com/edit/angular-eiecpz-il96yw?file=app.component.ts

Check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj