Custom chart legend

[Toan Bui]

hi, i want to show each chart legend per line. is there any way you can help me?

from  to 

[Srihari Muthukaruppan]

Hi Toan, 

 

We can achieve your requirement using width property in the legendSettings of the chart. Based on that we have prepared a sample for your reference. Please find the sample, code snippet and screenshot below. 

 

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

 

Code Snippet: 

// add your additional code here 

<ejs-chart style='display:block' align='center' id='chartcontainer' [title]='title' 

            [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [tooltip]='tooltip' (load)='load($event)' 

            [chartArea]='chartArea' [width]='width' [legendSettings]="legendSettings"> 

            <e-series-collection> 

                <e-series [dataSource]='data' type='Line' xName='x' yName='y' name='Germany' width=2 

                    [legendShape]="shape" [marker]='marker'> </e-series> 

                <e-series [dataSource]='data1' type='Line' xName='x' yName='y' name='England' width=2 

                   [legendShape]="shape1" [marker]='marker'> </e-series> 

            </e-series-collection> 

</ejs-chart> 

 

// add your additional code here 

 

public legendSettings: Object = { 

    width: '100', 

    enablePages: false 

  }; 

// add your additional code here 

 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

   

Thanks,   

Srihari 

[Toan Bui]

Thanks for your answer. My information has been cut. i want to set the width of each item to be 100%. can you help me?

[Srihari Muthukaruppan]

Hi Toan, 

 

As of now we don’t have support to achieve your requirement of 100% width for each legend. So we suggest you to assign fixed width for each legend through size property, if the legend text exceeds the legend size, then the  text gets trimmed and we can view the full content by hovering over the legend. 

 

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

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari