Last Updated: 09 Feb 2021 14:03 by ADMIN
Created on: 02 Feb 2021 16:03
Category: Charts
Type: Feature Request
legend chart custom html templates

The legend in the kendo charts has limited customization available via geometry and layouts (inherited from Group <- Element) using the visual property. But this does not allow a complete range of customization equivalent to html templates such as :

1. Table containing multiple information against each legend item. (eg : If the above legend consists of multiple items in a row could use Kendo grid in it).

2. No hyperlinks support in the text for routing to different pages on the UI or anywhere else.(eg : In the above Offline could be a hyperlink to navigate to other detailed page).

This point I think is important. Also an hyperlink (or maybe a click on an svg hide navigate to a separate legend in place).

3. Some other features supported in html such as sliders in a legend to display more info on icon click. (eg : clicking on an icon should expand the details for each legend item ).

4. Not sure if there is an svg support too. (eg:  In the above I would like to place an svg icon in place of circle geometry for colored indicators).


Also it would be much convenient to allow an html template inside the legend instead of coding geometries. The above points are in support for the need for a custom html template to be either accepted as the property of the legend or to allow to construct an html code under the <kendo-chart-legend></kendo-chart-legend>

1 comment
Martin Bechev
Posted on: 09 Feb 2021 14:03

Hi Aditya,

Thank you for the provided feedback.

Currently, the Chart Legend doesn't provide a built-in template for customizing its content. But the Chart component provides built-in API methods that help to create an entirely custom Legend. Please check the following StackBlitz example:

The demo utilizes the built-in togglePointVisibility and toggleHighlight methods, which enriched the custom elements by adding legend related functionalities. The demonstrated approach can be further enhanced in order to meet the exact project requirements.

Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at