Pie Chart Legend - Displaying a Percentage

[Steven]

Good Evening,

I was trying to figure out a way to have a legend appear with percentages and values like this example:

  Color of pie slice               Name                 Percentage                  Number of Items that make up pie slice

I need it to appear underneath the pie chart.

Attached is a picture of what it should look like

How can I make a custom Legend to have it appear like this?

Thanks,

Steven

[Durga Gopalakrishnan]

Hi Stevan,

Greeting from Syncfusion.

We suggest you use legendRender event to customize the legend text. We have modified legend text with percentage values and placed the legend at bottom position by specifying its position. We have attached sample for your reference.

@(Html.EJS().AccumulationChart("container").LegendSettings(

legend =>

{    legend.Position(Syncfusion.EJ2.Charts.LegendPosition.Bottom).Visible(true);

}).
.Load("onChartLoad").LegendRender("onLegendRender").Render())
<script>

    var percentage = [], length;

    var onChartLoad = function (args) {

        length = args.chart.series[0].dataSource.length;

        for (var i = 0; i < length; i++) {

             percentage.push(args.chart.series[0].dataSource[i].text);

        }

    };

    var count = 0;

    var onLegendRender = function (args) {

        if (count == length)

            count = 0;

        if (count <= length) {

            args.text = args.text + " " +percentage[count];

            count++;

        }

    };

</script>

https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomLegendPie1607719666.zip

Please revert us if you have any concerns.

Regards,

Durga G

[Steven]

Thank you so much for the quick reply. Is there any way in the legend to have the items appear stacked one on top of the other as apposed to side by side?

In your example you have

Labour 18%.  Legal 8%. Production 15%.  Etc....

What I would like is 

Labour 18%

Legal 8%

Production 15%

Etc...

[Durga Gopalakrishnan]

Hi Pyroli,

You can specify height and width for legend to display legend items one by one. We have attached modified sample for your reference.

LegendSettings(legend =>

{

    legend.Height("190").Width("130")
})

https://www.syncfusion.com/downloads/support/directtrac/general/ze/LegHeigthWidth-1099460957.zip

Please revert us if you have any questions.

Regards,

Durga G