How to Customize Legend Text in JavaScript Charts?

You can dynamically customize the legend text in a JavaScript Chart using the legendRender event. This event provides access to the text argument before the legend is rendered, allowing you to modify the label as needed.

Code Example

var total = [427000, 328500];
var count = 0;

var chart = new ej.charts.Chart({
   // Other chart configurations like series, axes, etc.

   legendRender: function(args) {
       if (count > 1) count = 0;
       args.text = args.text + ", Total : " + total[count];
       count++;
   }
});

chart.appendTo('#column-container'); 

Explanation

• The legendRender event is triggered for each legend item in the chart.
• Inside the event handler, the default legend label (args.text) is updated to include a corresponding total value from the total array.
• A counter (count) is used to track which value from the array should be appended to each legend item.
• If the counter exceeds the array length, it resets to ensure correct mapping during chart re-renders.
• This technique enhances the legend by adding contextual data, such as totals, directly to the legend labels.

Screenshot

Live Demo

StackBlitz Sample

Conclusion

I hope you enjoyed learning about how to customize legend text in JavaScript Chart.

You can refer to our JavaScript Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our JavaScript Chart Documentation to understand how to present and manipulate data.

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

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