CODEWITHSUNDEEP
angularkendo-ui
user2439903
user2439903

Reputation: 1307

How to add template to kendo-chart-series-item-label in kendo-chart-series?

I am trying to add template to kendo-chart-series-item-labels. I have used similar example from this link: https://plnkr.co/edit/eICeHxnl0JoIwuRYyRSt?p=preview

In app.components.ts file, instead of having this method:

public labelContent(e: any): string {
        return `${ e.category }: \n ${e.value}%`;
    }

Can i have a template in the element itself? Example:

<kendo-chart-series-item-labels
                                  color="gray"
                                  position="outsideEnd"
                                  template="#= category # - #= kendo.format('{0:P}', percentage)#"
                                  align="column"
                                  background="none">

this template is not working. So my question is how to write template to display the values?

Thanks!

Upvotes: 1

Views: 2875

Answers (1)

Philipp
Philipp

Reputation: 1884

There is (currently) no way to set a template directly within the kendo-chart-series-item-labels element. But there are 3 alternatives which can be used.

Option A - format string

If you 'only' want to properly format the number(s) shown, you can utilize the format input, which works for all kinds of number formats.

<kendo-chart-series-item-labels [format]="'n2'">
</kendo-chart-series-item-labels>

Option B - content callback

This is what you already did in the example you linked. Basically you provide a function to the chart, which specifies how the label shall look like.

<kendo-chart-series-item-labels [content]="contentString">
</kendo-chart-series-item-labels>

public contentString(content) {
    // return the formatted label as a string
}

Option C - visual content callback

Very similar to Option B but instead of returning a string that should be displayed, you are returning a kendo-drawing element.

<kendo-chart-series-item-labels [visual]="contentVisual">
</kendo-chart-series-item-labels>

public contentVisual(content: SeriesLabelsVisualArgs) {
    // return the formatted label as a kendo-drawing-element
}

Detailed explanation on those options can be found on their website.

Upvotes: 3

Related Questions