This is a migrated thread and some comments may be shown as answers.

Kendo Angular chart custom legend html template

3 Answers 114 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Kaan
Top achievements
Rank 1
Kaan asked on 28 Dec 2020, 07:16 PM

I'm trying to figure out if it is possible to use a custom html template for displaying kendo legends. I couldn't find a way to inject a "ng-template" item inside kendo-chart-legend. I am looking for a solution similar to

<kendo-chart-series-item-tooltip>

    <ng-template let-category="category" let-value="value"> {{ category | translate }} : {{ value | kendoNumber:'p2' }} </ng-template>

</kendo-chart-series-item-tooltip>

I wonder if it is possible to make it with legends as well. By the way, jQuery plugin has "legend.labels.template" but it seems that it is not for html templates.

3 Answers, 1 is accepted

Sort by
0
Ivan
Telerik team
answered on 30 Dec 2020, 07:16 AM

Hi Kaan,

It is possible to implement custom legend items by using kendo-chart-legend, kendo-chart-legend-item, as demonstrated in this stackblitz sample. More information regarding this approach can be found on this link of our documentation.

I hope this will help you.

Regards,
Ivan
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 https://learn.telerik.com/.

0
Kaan
Top achievements
Rank 1
answered on 05 Jan 2021, 09:13 AM

Hi Ivan,

Thank you for your answer. What I understand from your answer it is not possible to create a custom html template easily. The only way is creating a svg element

 

0
Ivan
Telerik team
answered on 07 Jan 2021, 07:16 AM

Hi Kaan,

Since all chart area is drawn on canvas or svg, it is not possible to use plain ng-template in order to add elements. Rather 'visual' hooks are provided for most of elements, legend, tooltip, crosshairs etc.

Working with paths is not so heavy as looking from first sight. What exactly is your scenario, we might help to some extent.

Regards,
Ivan
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 https://learn.telerik.com/.

Tags
Charts
Asked by
Kaan
Top achievements
Rank 1
Answers by
Ivan
Telerik team
Kaan
Top achievements
Rank 1
Share this question
or