How to display the legend of the Angular Pie Chart in the table?

Description

This article explains how to display the legend of the Pie Chart using Angular Charts in the table.

Solution

A legend provides information about the different elements or data series represented on the graph. The legend will be displayed on the top, bottom, left, or right of the chart area, either horizontally or vertically.

You can display the legend in a table format by using the text argument in the legendRender event of the chart. This event is triggered for each legend. The data from the data source of the series can be used to populate the text argument.

Code Snippet

public changeText(args: ILegendRenderEventArgs): void {
   if (args.text == "test") {
           args.text = args.text + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + (this.data[this.count]["Users"].toFixed(2)).toString();
   } else if (args.text == "Common") {
           args.text = args.text + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + (this.data[this.count]["Users"].toFixed(2)).toString();
  }      
};

The following image illustrates the output of the above code:

Refer to the working sample for additional details and implementation: View Sample in Stackblitz

Conclusion

We hope you enjoyed learning how to display the legend of the Angular Pie Chart in table format.

You can refer to our Angular Charts feature tour page to learn about its other features and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Charts example to understand how to create and visualize data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!