Legend styling

[Ryan]

Hello,

     I am using accumulationchart in my project. For some reason when the legend is very long ellipsis is not working. I've attached a picture below. Also control over legend styling is very less. And there's no documentation on how to use textStyle in legendSettings. Link is https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/legendSettings/#textstyle . Please help.

Thank you

Attachment: ellipsis_9523fca4.zip

[Srihari Muthukaruppan]

Hi Ryan, 

 

Please find the response for chart related query. 

 

Query #1:  For some reason when the legend is very long ellipsis is not working 

 

We have analysed your query. From that, we would like to let you know that the donut chart legend is working fine in the latest version 18.3.44. Unfortunately, we are unable to reproduce the reported scenario. We have also attached the sample used for testing for your reference. Please find the below screenshot, and sample. 

 

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

 

Screenshot:  

 

  

 

If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.      

1. Please share the package version used in the sample.
2. Try to reproduce the reported scenario in the above sample

 

Query 2 : how to use textStyle in legendSettings? 

 

We can achieve your requirement by using “Template” method available in tooltipSettings, through which the tooltip text can be formatted as per requirement. As of now we don’t have support for tooltip template of multiple series we are working on providing template support for trackball through which we can achieve your requirement. Based on that we have prepared a sample and also provided the code snippet for your reference.  

    

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

 

Code Snippet: 

// add your additional code here 

public legendSettings: Object = { 

    visible: true, 

    position: "Right", 

    textStyle: { 

      fontFamily: "TimesNewRoman", 

      size: "16px", 

      fontWeight: "600", 

      fontStyle: "italic" 

    } 

  }; 

// add your additional code here 

  

Screenshot:   

 

 

Let us know if you have any concerns. 

 

Regards,
Srihari M 

[Ryan]

Hello,

        Thank you very much for the quick reply. Means a lot !! I think I was having some version conflicts. These problems started occurring after I migrated from angular 7 to angular 9.

[Srihari Muthukaruppan]

Hi Ryan,  

 

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M 

[Ryan]

Hello,

        Are there any additional attributes to the textStyle method other than the one's you used?

Thanks,

Ryan D'Mello

[Ryan]

Hello,

        The example you provided itself has the bug. Just open it in a new tab and check it out. I view it on a 14 inch 16:9 aspect ratio with 1920x1080px dimensions laptop for your information if that helps. I've attached a picture below.

Thank you,

Ryan D'Mello

Attachment: 1_f64d0bec.zip

[Srihari Muthukaruppan]

Hi Ryan, 

 

Please find the chart related queries. 

 

Query 1: Are there any additional attributes to the textStyle method other than the one's you used? 

 

We have validated your query. Based on your requirement, we have attached the list of properties available in api textstyle which is similar to fontSize. Please find the link below. 

 

Link: https://ej2.syncfusion.com/angular/documentation/api/chart/fontModel/ 

 

Query 2: I view it on a 14 inch 16:9 aspect ratio with 1920x1080px dimensions laptop for your information if that helps 

 

We have analysed your query. From that, we would like to let you know that the legend gets cropped if it exceeds the chart Area which is the default behaviour of the chart legend. Hence we suggest you to reduce the font size and weight to overcome the reported scenario. 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M  

[Ryan]

Hello,

         The legend is not exceeding the chart area and even then it's getting cropped. Even if it was exceeding it should be using ellipsis like usual. It uses ellipsis when the screen is small. Why is it getting cropped when there is so much space available? Were you able to visualize it in the example you provided?

Regards,

Ryan D'Mello

[Srihari Muthukaruppan]

Hi Ryan, 

 

Sorry for the inconvenience. 

 

We have analysed your query. We have also tried to reproduce the reported scenario by changing the screen resolution to 1920 * 1080 px. Unfortunately we are unable to reproduce the reported scenario please find the sample and screenshot below. 

 

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

  

Screenshot:    

 

 

 

If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.     

   

1. Please clear the browser cache and nugget cache.
2. Please share the browser version information used for testing.

 

Regards, 

Srihari M