• Material 3
  • Bootstrap 5
  • Fluent 2
  • Tailwind CSS
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Legend Template in ASP.NET Core Chart Control

This sample demonstrates customizable legend templates using all-time Summer Olympic medal data. It displays Gold, Silver, and Bronze medal counts for five countries — Argentina, Austria, Ethiopia, Iran, and India. Each legend entry features a medal icon rendered through a custom legend template to enhance visual clarity and data interpretation.

DEMO
SOURCE

This sample shows how to render and configure a custom legend template in a Column chart. The legend items are customized using the template property of legendSettings, which allows embedding custom HTML content such as medal images and styled text into each legend item.

The legendRender event is used to dynamically update the template content for each series — setting the medal icon image and label text per series.

Tooltip is enabled in this example. To see a tooltip in action, hover over or tap on the chart.

More information on chart legends can be found in the documentation.

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab