Need to customize legend styling

[Ryan]

Hello,

      I am using @syncfusion-ej2-angular-charts version 17.3.30. I want to style the legend based on certain condition. The styling works through chrome developer tools, however I am not able to convert it to a class which I could apply to the legend. One would suggest to set legendSettings visibility to false but I don't want to hide it here, but set the display to none. I've attached two images, one with styling through dev tools and one without.

Thank you !

Attachment: bug_6ac01411.zip

[Srihari Muthukaruppan]

Hi Ryan, 

We have analysed your query. From that, we would like to let you know that we have customised the legend group using css as shown in the below code snippet. We have also attached the sample for your reference. Please find the sample, code snippet and screenshot below.  

  

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

  

Code Snippet:  

App.component.css: 

.block { 

  display: block; 

} 

.none { 

  display: none; 

} 

 

App.component.html: 

// add your additional code here  

 

<button ejs-button cssClass="e-info" (click)="onChange($event)" style="text-transform:none !important"> 

 Hide Legend </button> 

 

// add your additional code here  

App.component.ts: 

 

  public onChange(e: Event): void { 

    if (this.click) { 

      document.getElementById("chartcontainer_chart_legend_g_0").setAttribute("class", "none"); 

    } else { 

      document.getElementById("chartcontainer_chart_legend_g_0").setAttribute("class", "block"); 

    } 

    this.click = !this.click; 

  } 

 // add your additional code here 

  

Screenshot: 

Before Click: 

 

 

After click: 

 

 

If still this is not your exact requirement, kindly provide us with more information, which will be helpful in further analysis and provide you the solution sooner. 

  

Regards, 

Srihari 

[Ryan]

Hello,

      This solved my problem. I now have a class to manipulate the legend.

Thanks !!

[Srihari Muthukaruppan]

Hi Ryan,  

  

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

    

Thanks,    

Srihari M