Display Axis Labels Tooltip

The Chart does not provide a built-in Tooltip for the Axis labels. To display a custom tooltip when hovering the Chart axis labels, bind the mouseenter and mouseleave events of the Chart's surface element, and toggle a Popup with dynamic content based on the hovered label.

As the Chart component

The following example demonstrates the described approach:

import { ChartComponent } from '@progress/kendo-angular-charts';
import { Component, ViewChild, ChangeDetectorRef, OnDestroy, AfterViewInit } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
      <kendo-chart #chart>
          <kendo-chart-title text='Gross domestic product growth /GDP annual %/'></kendo-chart-title>
          <kendo-chart-legend [visible]='false'></kendo-chart-legend>
          <kendo-chart-tooltip format='{0}%'></kendo-chart-tooltip>
          <kendo-chart-category-axis>
            <kendo-chart-category-axis-item [categories]='categories'>
              <kendo-chart-category-axis-item-labels [visual]='visual'>
              </kendo-chart-category-axis-item-labels>
            </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>
        <kendo-chart-value-axis>
        <kendo-chart-value-axis-item>
          <kendo-chart-value-axis-item-labels [visual]='visual'>
              </kendo-chart-value-axis-item-labels>
          </kendo-chart-value-axis-item>
        </kendo-chart-value-axis>
        <kendo-chart-series>
          <kendo-chart-series-item *ngFor='let item of series'
              type='column' style='smooth' [data]='item.data' [name]='item.name'>
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
      <kendo-popup *ngIf='show' [anchor]='popupAnchor'>Popup content: {{popupContent}}</kendo-popup>
    `
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild('chart') private chart: ChartComponent;

  public series: any[] = [{
      name: 'India',
      data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
    }, {
      name: 'Russian Federation',
      data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, 7.832, 4.3, 4.3]
    }, {
        name: 'Germany',
        data: [0.010, 0.375, 1.161, 0.684, 3.7, 3.269, 1.083, 5.127, 3.690, 2.995]
    }, {
        name: 'World',
        data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, 2.245, 4.339, 2.727]
  }];

  public categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];

  public show = false;
  public popupContent;
  public popupAnchor;

  constructor(private cdr: ChangeDetectorRef) {}

  public ngAfterViewInit(): void {
    this.chart.render.subscribe(res => {
      res.sender.surface.bind('mouseenter', this.onMouseEnter);
      res.sender.surface.bind('mouseleave', this.onMouseLeave);
    });
  }

  // Please note that visual is an arrow function in order to capture `this`.
  public visual = (args: any): any => {
    const visual = args.createVisual();

    // Set the text on a custom `tooltip` field.
    visual.tooltip = args.text;

    return visual;
  }

  public onMouseEnter = (e: any) => {
    if (e.element.parent.tooltip === undefined) {
      return;
    }

    this.popupAnchor = e.originalEvent.target;
    this.popupContent = e.element.chartElement.content;
    this.show = true;

    // The Surface events are triggered outside the Angular Zone.
    // A manual change detection cycle is needed to display the tooltip.
    this.cdr.detectChanges();
  }

  public onMouseLeave = (e: any) => {
    if (e.element.parent.tooltip === undefined) {
      return;
    }

    // The Surface events are triggered outside the Angular Zone.
    // A manual change detection cycle is needed to hide the tooltip.
    this.popupAnchor = this.popupContent = undefined;
    this.show = false;

    this.cdr.detectChanges();
  }

  public ngOnDestroy(): void {
    this.chart.surface.unbind('mouseenter', this.onMouseEnter);
    this.chart.surface.unbind('mouseleave', this.onMouseLeave);
  }
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { PopupModule } from '@progress/kendo-angular-popup';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule, PopupModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article