Customize Pie Chart Legend so it displays on 2 columns and changing format to include y value info.

[Enrique Rojas Maldonado]

I want to customize the legend at the bottom of my pie chart so it looks as the following:

(Ignore the '-------', those are just to simulate different string lengths).

I am having problems with the following:

• Splitting up the legend items onto 2 different columns. I think even if was one horizontal column it would work for what I am trying to do.
• Finding info on how to customize each item in the legend to add more info such as the x value and the percentage it takes up on the chart (needs to be dynamic if  the visibility of a slice is removed).
  
• something along the lines of  Point Name (y value): percentage%   :'${point.name} ${point.y}:       (${point.y.percentage?}%)<b>'

This is a demo I am working on for now (Also attaching it as an html page):

https://stackblitz.com/edit/sdu3jv?file=index.js

Attachment: legendDemo_bb7cb085.zip

[Durga Gopalakrishnan]

Hi Enrique, 

  

Greetings from Syncfusion. 

  

We have analyzed your queries with attached sample. Please check with below suggestions. 

  

# 1 : Splitting up the legend items onto 2 different columns. I think even if was one horizontal column it would work for what I am trying to do. 

  

You can use height and width properties to split the legends into different rows and columns. By default, when legend position is Top or Bottom, then legend items will be ordered in horizontal way as mentioned in screenshot. To order those legends in vertical manner, you can change legend position as Left or Right.  

  

# 2 : how to customize each item in the legend to add more info such as the x value and the percentage it takes up on the chart 

  

We suggest you to use legendRender event to add custom text to each legend items. We have modified sample and attached for your reference.  

  

legendRender: function(args){ 

     if(count > jBHChartData.length) 

       count = 0; 

     var yVal = jBHChartData[count].y + "%"; 

     var id = jBHChartData[count].id; 

     args.text = args.text + yVal +" " + id; 

     count = count + 1;      

   } 

  

 

  

Sample : https://stackblitz.com/edit/sdu3jv-7hcbtg 

  

API : https://ej2.syncfusion.com/javascript/documentation/api/chart/#legendrender 

  

Please revert us if you have any concerns. 

  

Regards,  

Durga G 

[Enrique Rojas Maldonado]

Thanks for the solution Durga, sorry for the late reply. Other projects took priority over the holidays, just got back working on this.

The problem I have is that my category names are not the same length. I added the dashes --------- as a way to simulate the different lengths of my categories.


also,

I found the following code to dynamically add the percentage size of a slice onto the tooltip (it even updates when I remove visibility of a slice!), my question if there is a way to implement this on the legend labels as well?:

tooltipRender: function(args) {

var value = args.point.y / args.series.sumOfPoints * 100;

args.text = args.point.x + '' + Math.ceil(value) + '' + '%';

},

I couldn't find a way to access the sumOfPoints on the legendRender.

[Durga Gopalakrishnan]

Hi Enrique, 

We didn’t stored an internal property sumOfPoints in legendRender event. We request you to calculate this value manually using chart load event. We have attached the modified sample for your reference. Please check with below snippet and sample. 

Code Snippet : 

load: function(args){ 

    var data = args.chart.series[0].dataSource; 

    for (var i = 0; i < data.length; i++) 

      sumOfPoints = sumOfPoints + data[i].y; 

   }, 

legendRender: function(args){ 

      var value = jBHChartData[count].y / sumOfPoints * 100; 

     args.text = args.text + '' + Math.ceil(value) + '' + '%'; 

}  

Screenshot : 

 

Sample : https://stackblitz.com/edit/sdu3jv-mymsbq 

Please let us know if you have any concerns. 

Regards, 

Durga G 

[Enrique Rojas Maldonado]

Thank you! I will give that a try.

Is there a solution for the column problem? I can't remove the dashes "-------" on my example. They represent other data that I had to remove to share this example. My legend looks like the following screenshot, but I would want them to split on 2 even columns:

I need to do same size columns without removing the "---------" characters.

Here is the code I am working with
https://stackblitz.com/edit/sdu3jv?file=index.js

[Durga Gopalakrishnan]

Hi Enrique, 

As of now, we don’t have support to place the legend columns with equal spacing. We have already logged a feature on “Textoverflow support for accumulation chart legend”. Using this feature, you can customize maximum label width of each legend items. We will include this feature in our upcoming Volume 1 Main Release which is expected to be rolled out at end of March, 2022. You can keep track of the feature from the below feedback link. 

  

Feedback Link : https://www.syncfusion.com/feedback/27692/textoverflow-support-for-accumulation-chart-legend 

  

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.  

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi Enrique,

We are glad to announce that our Essential Studio 2022 Volume 1 release v20.1.0.47 is rolled out and is available for download under the following link.

Essential Studio 2022 Volume 1 Main Release v20.1.0.47 is available for download | Announcements Forums | Syncfusion

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,          

Durga Gopalakrishnan.