How to set dynamic content to a tooltip?

Question

I need to make a call to an api to return the tooltip content. Does anyone know, when setting a tooltip, how to acess the arguments in the dataItem, pass them to a function which returns the tooltip content?

I've seen this and this example but I'cant understand how to do this.

Answer 1

The chart provides tooltip templates, as shown in the chart tooltip online demos. These allow custom tooltips to be created:

<kendo-chart-tooltip>
  <template kendoSeriesTooltipTemplate let-value="value">
      Default Content {{ value }}
  </template>
</kendo-chart-tooltip>

You can use pipes on the value to process it, or render a custom component. Each series can have its custom tooltips, if needed:

<kendo-chart-series-item>
  <kendo-chart-series-item-tooltip>
    <template let-value="value">
       Series 1 value: {{ value }}
    </template>
  </kendo-chart-series-item-tooltip>
</kendo-chart-series-item>

To make an API call, create a component that makes the request (and probably caches it) and use it in the tooltip template:

<kendo-chart-tooltip>
  <template kendoSeriesTooltipTemplate let-value="value">
     <my-series-details-tooltip [value]="value"></my-series-details-tooltip>
  </template>
</kendo-chart-tooltip>

Here is a plunker demo that shows this.