Template kendo chart category axis call function

2 posts, 0 answers
  1. alex
    alex avatar
    17 posts
    Member since:
    Nov 2020

    Posted 07 Jan Link to this post

    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

     

     

     

  2. Martin
    Admin
    Martin avatar
    282 posts

    Posted 11 Jan Link to this post

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

Back to Top