All Components

Tooltips

The Kendo UI Chart for Angular 2 supports the following types of tooltips:

Series Tooltip

The series tooltip is displayed when hovering 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.

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 background="blue">
      </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 {
}

By default, the content of the tooltip is determined based on the point type. To customize it, use the format option or specify a template.

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

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 kendoSeriesTooltipTemplate 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 templates.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-tooltip>
        <template kendoSeriesTooltipTemplate let-value="value">
            Default Content {{ value }}
        </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>
            <template let-value="value">
                Series 1 value: {{ value }}
            </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 hovering over a category and is used for categorical charts. It shows a summary for all points in the hovered category.

To enable the shared tooltip, use the shared option of the kendo-chart-tooltip component.

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

By default, the shared tooltip displays the category as a title and an item for each point in that category.

To customize the content shown 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 kendoSharedTooltipTemplate directive as a child of the kendo-chart-tooltip component.

The available fields in the template are:

The following example demonstrates how to use a custom template for the shared tooltip.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-tooltip [shared]="true">
        <template kendoSharedTooltipTemplate let-category="category" let-points="points">
            <div> {{ category }} </div>
            <div *ngFor="let point of points">
                {{ point.series.name }} : {{ point.value }}
            </div>          
        </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.

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 [visible]="true">
                <kendo-chart-category-axis-item-crosshair-tooltip [visible]="true">
                </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 [visible]="true">
                <kendo-chart-value-axis-item-crosshair-tooltip [visible]="true">
                </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 {
}

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 [visible]="true">
                <kendo-chart-x-axis-item-crosshair-tooltip [visible]="true">
                </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 [visible]="true">
                <kendo-chart-y-axis-item-crosshair-tooltip [visible]="true">
                </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 {
}
In this article