Kendo Angular chart custom legend html template

[Kaan]

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.

[Ivan]

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

[Kaan]

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

 

[Ivan]

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