CODEWITHSUNDEEP
angularkendo-ui-angular2
Artsiom Tsernouski
Artsiom Tsernouski

Reputation: 23

Kendo UI Angular 2+ Chart - Series Tooltip Template - Access to Category Value and Other Data

I'm using the kendo chart component with the series items of the type "line".

According to the documentation here it's possible to use the current value as a placeholder within the series tooltip template.

Is there a possibility to access the current category within the template as well? And in case I'm binding to the objects instead of the primitive values is it possible to access the current data item not only the value?

Thanks

Upvotes: 2

Views: 4504

Answers (1)

Varun Pozhath
Varun Pozhath

Reputation: 626

There is a way. The documentation provided is not straightforward and I found it confusing as well.

Current Category can be accessed by declaring a variable and setting it to category.

If you are using an object to set the data of the kendo-chart-series-item, other properties of the object can also be used as a tooltip. We use the dataItem property here to access the other properties of the data that I have set.

  <kendo-chart-series-item-tooltip>
        <ng-template let-value="value" let-category="category" let-dataItem="dataItem">
          Number of children: {{ dataItem.number }}
        </ng-template>
  </kendo-chart-series-item-tooltip>

here each dataItem object from the array can be set to the tooltip A complete list of properties of Tooltip that can accessed can be found here.

http://www.telerik.com/kendo-angular-ui/components/charts/api/TooltipTemplatePoint/#toc-category

WORKING CODE

<kendo-chart>
      <kendo-chart-tooltip>
        <ng-template kendoChartSeriesTooltipTemplate let-value="value">
          Default Content {{ value }}
        </ng-template>
      </kendo-chart-tooltip>
      <kendo-chart-title text="% children with conscientious objection recorded"></kendo-chart-title>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item
          [categories]="['1999', '2000', '2001']"
          [title]="{ text: 'Years' }">
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-series>
        <kendo-chart-series-item type="column" [data]="testData" field="percent" >
          <kendo-chart-series-item-tooltip>
            <ng-template let-value="value" let-category="category" let-dataItem="dataItem">
              Number of children: {{ dataItem.number }}
            </ng-template>
          </kendo-chart-series-item-tooltip>

        </kendo-chart-series-item>
      </kendo-chart-series>
 </kendo-chart>

Declare TestData object below in typescript file 

testData = [{
      date: 1999,
      percent: 0.23,
      number: 4271
    },
    {
      date: 2000,
      percent: 0.41,
      number: 7624
    },
    {
      date: 2001,
      percent: 0.55,
      number: 9987
    }]

Here I am using the number attribute of the object as a tooltip. Hope this helps. Please let me know if you are not able to solve it. Happy to help

Upvotes: 8

Related Questions