Tooltips

The Chart supports three types of tooltips.

The Chart tooltip types are:

• Series tooltip—A tooltip displayed for the hovered chart point.
• Shared tooltip—A tooltip displayed for the hovered chart category.
• Crosshair tooltip—A tooltip displayed for the axes crosshairs.

Series Tooltip

The series tooltip is displayed when the user hovers over a point and is used to show the point values or any additional information. By default, the color of the tooltip matches the color of the point to help associate the tooltip with that point. It is also possible to set it to a specific color by using the background and border options.

Series Tooltip Configuration

To enable and configure the tooltip for all series, use the kendo-chart-tooltip component. To enable and configure the tooltip for a specific series, use the kendo-chart-series-item-tooltip component.

The following example demonstrates how to configure the tooltip globally and to override an option for a specific series.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-tooltip>
      </kendo-chart-tooltip>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="[1, 2, 3]">
        </kendo-chart-series-item>
        <kendo-chart-series-item [data]="[1, 2, 3]">
          <kendo-chart-series-item-tooltip background="green">
          </kendo-chart-series-item-tooltip>
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    `
})
class AppComponent {
}

Series Tooltip Customization

By default, the content of the tooltip is determined based on the point type. To customize the tooltip content, either:

• Use the format option, or
• Specify a template.

Using the format Option

The following example demonstrates how to customize the content of the tooltip through the format configuration.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-tooltip format="Default Content {0}">
      </kendo-chart-tooltip>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="[1, 2, 3]">
        </kendo-chart-series-item>
        <kendo-chart-series-item [data]="[1, 2, 3]">
          <kendo-chart-series-item-tooltip format="Series 1 value: {0}">
          </kendo-chart-series-item-tooltip>
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    `
})
class AppComponent {
}

Specifying a Template

To specify a template, add a template tag as a child of the kendo-chart-tooltip or kendo-chart-series-item-tooltip components. The template is passed to the TooltipTemplatePoint. If you add the template to the kendo-chart-tooltip component, use the kendoChartSeriesTooltipTemplate directive on the template to indicate that the template is used for the series.

The following example demonstrates how to customize the content by using a template.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-tooltip>
        <ng-template kendoChartSeriesTooltipTemplate let-value="value">
            Default Content {{ value }}
        </ng-template>
      </kendo-chart-tooltip>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="[1, 2, 3]">
        </kendo-chart-series-item>
        <kendo-chart-series-item [data]="[1, 2, 3]">
          <kendo-chart-series-item-tooltip>
            <ng-template let-value="value">
                Series 1 value: {{ value }}
            </ng-template>
          </kendo-chart-series-item-tooltip>
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    `
})
class AppComponent {
}

Shared Tooltip

The shared tooltip is displayed when the user hovers over a category and is used for Categorical charts. The shared tooltip shows a summary of all points in the hovered category. To enable the shared tooltip, use the shared option of the kendo-chart-tooltip component.

Shared Tooltip Configuration

The following example demonstrates how to enable the shared tooltip.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-tooltip [shared]="true">
      </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 [data]="[1, 2, 3]">
        </kendo-chart-series-item>
        <kendo-chart-series-item [data]="[1, 2, 3]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    `
})
class AppComponent {
}

Shared Tooltip Customization

By default, the shared tooltip displays the category as a title and an item for each point in that category. To customize the content that is displayed for the points of a specific series, use the format option, or the template for the series. To customize the entire content, add a template tag with the kendoChartSharedTooltipTemplate directive as a child of the kendo-chart-tooltip component.

The available fields in the template are:

• category—The hovered category.
• points—An array of the TooltipTemplatePoints category.

@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 {
}

Crosshair Tooltip

The crosshair tooltips are displayed next to the axes crosshairs and show the current value of the crosshairs. To enable the crosshair tooltip, use the specific axis crosshair-tooltip component.

Using in Categorical Charts

The following example demonstrates how to enable the crosshair tooltips for the Categorical charts.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="['A', 'B', 'C']">
            <kendo-chart-category-axis-item-crosshair>
                <kendo-chart-category-axis-item-crosshair-tooltip>
                </kendo-chart-category-axis-item-crosshair-tooltip>
            </kendo-chart-category-axis-item-crosshair>
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
       <kendo-chart-value-axis>
        <kendo-chart-value-axis-item>
            <kendo-chart-value-axis-item-crosshair>
                <kendo-chart-value-axis-item-crosshair-tooltip>
                </kendo-chart-value-axis-item-crosshair-tooltip>
            </kendo-chart-value-axis-item-crosshair>
        </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="[1, 2, 3]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    `
})
class AppComponent {
}

Using in Scatter Charts

The following example demonstrates how to enable the crosshair tooltips for the Scatter charts.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-x-axis>
        <kendo-chart-x-axis-item>
            <kendo-chart-x-axis-item-crosshair>
                <kendo-chart-x-axis-item-crosshair-tooltip>
                </kendo-chart-x-axis-item-crosshair-tooltip>
            </kendo-chart-x-axis-item-crosshair>
        </kendo-chart-x-axis-item>
      </kendo-chart-x-axis>
       <kendo-chart-y-axis>
        <kendo-chart-y-axis-item>
            <kendo-chart-y-axis-item-crosshair>
                <kendo-chart-y-axis-item-crosshair-tooltip>
                </kendo-chart-y-axis-item-crosshair-tooltip>
            </kendo-chart-y-axis-item-crosshair>
         </kendo-chart-y-axis-item>
      </kendo-chart-y-axis>
      <kendo-chart-series>
        <kendo-chart-series-item type="scatter" [data]="[[1, 1], [2, 2], [3, 3]]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    `
})
class AppComponent {
}

Popup Settings

The Chart tooltip uses a Popup component for its rendering. It is possible to customize the Popup by directly using the popupSettings.

The following example demonstrates how to append the tooltip to a specified container.

import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [popupSettings]="popupSettings">
      <kendo-chart-tooltip>
      </kendo-chart-tooltip>
      <kendo-chart-series>
        <kendo-chart-series-item [data]="[1, 2, 3]">
        </kendo-chart-series-item>
        <kendo-chart-series-item [data]="[1, 2, 3]">
          <kendo-chart-series-item-tooltip background="green">
          </kendo-chart-series-item-tooltip>
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>

    <ng-container #container>
    </ng-container>
    `
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef })
  public container: ViewContainerRef;

  public popupSettings: any;

  ngAfterViewInit(container: ViewContainerRef) {
    this.popupSettings = { appendTo: this.container };
  }
}

Suggested Links

• Axes
• Chart Area
• Crosshairs
• Error Bars
• Labels
• Legend
• Notes
• Panes
• Plot Area
• Plot Bands
• Selection
• Series
• Title
• API Reference of the Chart