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

Template kendo chart category axis call function

1 Answer 89 Views
Charts
This is a migrated thread and some comments may be shown as answers.
alex
Top achievements
Rank 1
Iron
Veteran
alex asked on 07 Jan 2021, 04:47 PM

Good morning, I would like to understand if it is possible to apply a template to modify the category text. I would like for each category of the datasource to be called either a pipe or my function to modify the text. For example if I have the numbers of the months I would like to call a function that returns me the name of this. it's possible to do it? or the only solution is to change the datasource to the backend?

 

<kendo-chart>
                <kendo-chart-title text="Report"></kendo-chart-title>
                <kendo-chart-category-axis>
                    <kendo-chart-category-axis-item
                        [categories]="month"
                        [title]="{ text: 'Months' }">
                        <ng-template let-value="value" let-category="month">
                         <span> {{convertMonth(value)}}</span>
                       </ng-template>
                    </kendo-chart-category-axis-item>
                </kendo-chart-category-axis>
</kendo-chart>

 

regards,

 

Alex

 

 

 

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 11 Jan 2021, 08:38 AM

Hi Alex,

Thank you for the code snippet.

What can be done to convert a category axis item number into a month name is to utilize the content callback function of the labels option. This approach allows the developer to pass any custom content as an axis label:

 <kendo-chart-category-axis>
        <kendo-chart-category-axis-item
          [categories]="categories"
          [title]="{ text: 'Months' }"
          [labels]="labels"
        >
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
public labels: CategoryAxisLabels = {
    content: label => {
      return this.monthNames[label.value];
    }
  };

Here is an example:

https://stackblitz.com/edit/angular-s6jcc9

I hope this helps.

Regards,
Martin
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
alex
Top achievements
Rank 1
Iron
Veteran
Answers by
Martin
Telerik team
Share this question
or