Kendo Angular chart custom legend html template

4 posts, 0 answers
  1. Kaan
    Kaan avatar
    2 posts
    Member since:
    Dec 2020

    Posted 28 Dec 2020 Link to this post

    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.

  2. Ivan
    Admin
    Ivan avatar
    44 posts

    Posted 30 Dec 2020 Link to this post

    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/.

  3. Kaan
    Kaan avatar
    2 posts
    Member since:
    Dec 2020

    Posted 05 Jan in reply to Ivan Link to this post

    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

     

  4. Ivan
    Admin
    Ivan avatar
    44 posts

    Posted 07 Jan Link to this post

    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/.

Back to Top