Components / Charts / API / SharedTooltipTemplateDirective / 
New to Kendo UI for Angular? Start a free 30-day trial

SharedTooltipTemplateDirective

A directive that selects a template within the <kendo-chart-tooltip> component for the shared series tooltip. The available fields in the template context are:

  • let-points="points"—An array of the TooltipTemplatePoints category.
  • let-category="category"—The category name.
  • let-categoryText="categoryText"—The category name as text.
  • let-nameColumn="nameColumn"—Returns a Boolean value indicating whether the name property of the SeriesItemComponent is defined.
  • let-colorMarker="colorMarker"—Returns a Boolean value indicating whether one or more series colors are specified in the Chart. If the Chart contains only one SeriesItemComponent, the context field will return false.
  • let-colSpan="colSpan"—Specifies the number of columns covered by the tooltip. The default value is 1 and increases by 1 if nameColumn and colorMarker are set to true.
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-tooltip [shared]="true">
        <ng-template kendoChartSharedTooltipTemplate let-category="category" let-points="points">
            <div> {{ category }} </div>
            <div *ngFor="let point of points">
                {{ point.series.name }} : {{ point.value }}
            </div>
        </ng-template>
      </kendo-chart-tooltip>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="['A', 'B', 'C']">
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-series>
        <kendo-chart-series-item name="A" [data]="[1, 2, 3]">
        </kendo-chart-series-item>
        <kendo-chart-series-item name="B" [data]="[1, 2, 3]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

Selector

[kendoChartSharedTooltipTemplate]

In this article

Not finding the help you need?

Contact Support