HelpBot Assistant

How can I help you?

Tooltip in Angular Chart component

14 Mar 202624 minutes to read

The chart displays detailed information about a data point through a tooltip when the mouse pointer moves over the point.

Tooltip

Default tooltip

By default, tooltip is not visible. You can enable the tooltip by setting the enable property to true and by injecting TooltipService into the @NgModule.providers.

To know about tooltip, you can check out this video:

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, StepLineSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, TooltipService, CategoryService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { toolData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, StepLineSeriesService, LegendService, TooltipService, CategoryService, ColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2 name='China' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public marker?: Object;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData = toolData;
        this.primaryXAxis = {
            valueType: 'DateTime',
        };
        this.tooltip = { enable: true };
        this.marker = { visible: true, width: 10, height: 10 };
        this.title = 'Unemployment Rates 1975-2010';

}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Fixed tooltip

By default, the tooltip tracks the mouse movement, but you can set a fixed position for the tooltip by using the location property.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, StepLineSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, TooltipService, CategoryService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { toolData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, StepLineSeriesService, LegendService, TooltipService, CategoryService, ColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2 name='China' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public marker?: Object;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData = toolData;
        this.primaryXAxis = {
            valueType: 'DateTime',
        };
        this.tooltip = { enable: true, location: { x: 120, y: 20 } };
        this.marker = { visible: true, width: 10, height: 10 };
        this.title = 'Unemployment Rates 1975-2010';

}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Format the tooltip

By default, the tooltip displays the x- and y-values of a data point. Additional information can be shown by specifying a custom format. For example, the format ${series.name} ${point.x} displays the series name along with the x-value of the data point.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, StepLineSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, TooltipService, CategoryService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { toolData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, StepLineSeriesService, LegendService, TooltipService, CategoryService, ColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2 name='China' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public tooltip?: Object;
primaryYAxis: any;
    ngOnInit(): void {
        this.chartData = toolData;
        this.primaryXAxis = {
            valueType: 'DateTime'
        };
        this.tooltip = { enable: true, header: 'Unemployment', format: '<b>${point.x} : ${point.y}</b>' };
        this.marker = { visible: true, width: 10, height: 10 };
        this.title = 'Unemployment Rates 1975-2010';

}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Individual series format

You can format each series tooltip separately using the series tooltipFormat property.

Note: If the series tooltipFormat is given, it shows the tooltip for that series in that format, or else it will take the chart’s global tooltip format.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, StepLineSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, TooltipService, CategoryService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { toolData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, StepLineSeriesService, LegendService, TooltipService, CategoryService, ColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2 name='China' [marker]='marker' [tooltipFormat]="tooltipFormat"></e-series>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y1' width=2 name='China' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public tooltip?: Object;
    public tooltipFormat?: string;
    ngOnInit(): void {
      this.chartData = toolData;
        this.primaryXAxis = {
            valueType: 'DateTime'
        };
        this.tooltip = { enable: true, header: 'Unemployment', format: '<b>${point.x} : ${point.y}</b>' };
        this.marker = { visible: true, width: 10, height: 10 };
        this.title = 'Unemployment Rates 1975-2010';
        this.tooltipFormat = '${point.x}';

}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Tooltip template

Custom HTML content can be rendered in the tooltip using the template property. You can use placeholders like ${x} and ${y} within the template to display the x- and y-values of the corresponding data point.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, StepLineSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, TooltipService, CategoryService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { toolData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, StepLineSeriesService, LegendService, TooltipService, CategoryService, ColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2 name='China' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public marker?: Object;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData = toolData;
        this.primaryXAxis = {
            valueType: 'DateTime'
        };
        this.tooltip = { enable: true, template: '#Unemployment' };
        this.marker = { visible: true, width: 10, height: 10 };
        this.title = 'Unemployment Rates 1975-2010';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable highlight

By setting the enableHighlight property to true, all points in the hovered series are highlighted while the remaining points are dimmed. This behavior improves focus and readability during data analysis.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { DateTimeService, StepLineSeriesService, LegendService, TooltipService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
    imports: [ChartModule],
    providers: [DateTimeService, StepLineSeriesService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2 name='China' [marker]='marker'></e-series>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y1' width=2 name='Australia' [marker]='marker'></e-series>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y2' width=2 name='Japan' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public tooltip?: Object;
    public legendSettings?: Object;
    ngOnInit(): void {
        this.chartData = chartData;
        this.primaryXAxis = {
            title: 'Years',
            lineStyle: { width: 0 },
            labelFormat: 'y',
            intervalType: 'Years',
            valueType: 'DateTime',
            edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Percentage (%)',
            minimum: 0,
            maximum: 20,
            interval: 4,
            labelFormat: '{value}%'
        };
        this.tooltip = { enable: true, enableHighlight: true };
        this.marker = { visible: true, width: 10, height: 10 };
        this.title = 'Unemployment Rates 1975-2010';
        this.legendSettings = { visible: true };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Tooltip mapping name

By default, the tooltip displays only the x- and y-values of a data point. Additional information from the data source can be shown using the tooltipMappingName property of the series. Use the ${point.tooltip} placeholder in the tooltip format to display the mapped value.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, StepLineSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, TooltipService, CategoryService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { toolData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, StepLineSeriesService, LegendService, TooltipService, CategoryService, ColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='x' yName='y' width=2 tooltipMappingName='country'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData =  [
                    { x: 'Germany', y: 72, country: 'GER: 72'},
                    { x: 'Russia', y: 103.1, country: 'RUS: 103.1'},
                    { x: 'Brazil', y: 139.1, country: 'BRZ: 139.1'},
                    { x: 'India', y: 462.1, country: 'IND: 462.1'},
                    { x: 'China', y: 721.4, country: 'CHN: 721.4'},
                    { x: 'United States Of America', y: 286.9, country: 'USA: 286.9'},
                    { x: 'Great Britain', y: 115.1, country: 'GBR: 115.1'},
                    { x: 'Nigeria', y: 97.2, country: 'NGR: 97.2'},
        ];
        this.primaryXAxis = {
             valueType: 'Category',
        };
        this.tooltip = {
               enable: true, format: '${point.tooltip}'
        };
        this.title = 'Internet Users in Million – 2016';

}


}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customize the appearance of tooltip

The appearance of the tooltip can be customized using the following properties:

  • fill - Specifies the background color of the tooltip.
  • border - Configures the tooltip border.
  • textStyle - Customizes the tooltip text style.

The highlightColor property is used to change the color of a data point when it is highlighted during tooltip interaction.

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, StepLineSeriesService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts'
import { LegendService, TooltipService, CategoryService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { toolData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, StepLineSeriesService, LegendService, TooltipService, CategoryService, ColumnSeriesService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" highlightColor="red" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2 name='China' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    public marker?: Object;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData = toolData;
        this.primaryXAxis = {
            valueType: 'DateTime'
        };
        this.tooltip = {
                enable: true,
                format: '${series.name} ${point.x} : ${point.y}',
                fill: '#7bb4eb',
                border: {
                   width: 2,
                   color: 'grey'
                }
        };
        this.marker = { visible: true, width: 10, height: 10 };
        this.title = 'Unemployment Rates 1975-2010';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Hide tooltip in Angular Chart component

Use the tooltipRender event to hide tooltips for deselected series. When a series is deselected, cancel the tooltip in the event.

import { ChartModule, ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { PageService } from '@syncfusion/ej2-angular-grids'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import {
    LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService, CategoryService,
    StepAreaSeriesService, SplineSeriesService, ScrollBarService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
    SelectionService, ScatterSeriesService, ZoomService, ColumnSeriesService, AreaSeriesService, RangeAreaSeriesService
} from '@syncfusion/ej2-angular-charts'


import { Component, OnInit } from '@angular/core';
import { ITooltipRenderEventArgs, Series } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         ChartModule, ChartAllModule, AccumulationChartAllModule, AccumulationChartModule, GridModule, DialogModule
    ],

providers: [LineSeriesService, DateTimeService, ColumnSeriesService, DataLabelService, ZoomService, StackingColumnSeriesService, CategoryService,
        StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
        PieSeriesService, AccumulationTooltipService, ScrollBarService, AccumulationDataLabelService, SelectionService, ScatterSeriesService,
        PageService, AreaSeriesService, RangeAreaSeriesService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'
     [tooltip]='tooltip' selectionMode='Series'  (tooltipRender)='tooltipRender($event)'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' name='Max Temp' width=2 [marker]='marker'></e-series>
               <e-series [dataSource]='chartData1' type='Line' xName='x' yName='y' name='Max Temp' width=2 [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public primaryYAxis?: Object;
    public chartData1: Object[] = [
        { x: new Date(2005, 0, 1), y: 28 }, { x: new Date(2006, 0, 1), y: 44 },
        { x: new Date(2007, 0, 1), y: 48 }, { x: new Date(2008, 0, 1), y: 50 },
        { x: new Date(2009, 0, 1), y: 66 }, { x: new Date(2010, 0, 1), y: 78 },
        { x: new Date(2011, 0, 1), y: 84 }
    ];
    public tooltip: Object = {
        enable: true
    };
    public tooltipRender(args: ITooltipRenderEventArgs): void {
       let series: Series = <Series>(args.series);
       if (series.seriesElement.classList[0] === 'chart-container_ej2_deselected') {
          args.cancel = true;
       }
    };
    ngOnInit(): void {
        this.chartData =[
        { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
        { x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 },
        { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
        { x: new Date(2011, 0, 1), y: 70 }
                ];
        this.primaryXAxis = {
        valueType: 'DateTime',
        labelFormat: 'y',
        intervalType: 'Years',
        edgeLabelPlacement: 'Shift',
        majorGridLines: { width: 0 }
        };
        this.primaryYAxis = {
        labelFormat: '{value}%',
        rangePadding: 'None',
        minimum: 0,
        maximum: 100,
        interval: 20,
        lineStyle: { width: 0 },
        majorTickLines: { width: 0 },
        minorTickLines: { width: 0 }
        };
        this.marker = {  visible: true,
        height: 10,
        width: 10 };
        this.title =  'NC Weather Report - 2016';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Percentage tooltip in Angular Chart component

Use the tooltipRender event to display percentage values for pie points. Compute the percentage from args.point.y and args.series.sumOfPoints, then set the formatted result on args.content.

import { ChartModule, ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import {
    LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService, CategoryService,
    StepAreaSeriesService, SplineSeriesService, ScrollBarService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
    SelectionService, ScatterSeriesService, ZoomService, ColumnSeriesService, AreaSeriesService, RangeAreaSeriesService
} from '@syncfusion/ej2-angular-charts'


import { Component, OnInit } from '@angular/core';
import { IAccTooltipRenderEventArgs } from '@syncfusion/ej2-angular-charts';
@Component({
imports: [
         ChartModule, ChartAllModule, AccumulationChartAllModule, AccumulationChartModule
    ],

providers: [LineSeriesService, DateTimeService, ColumnSeriesService, DataLabelService, ZoomService, StackingColumnSeriesService, CategoryService,
        StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
        PieSeriesService, AccumulationTooltipService, ScrollBarService, AccumulationDataLabelService, SelectionService, ScatterSeriesService,
        AreaSeriesService, RangeAreaSeriesService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-accumulationchart id="chart-container" [tooltip]='tooltip' [title]='title' (tooltipRender)='tooltipRender($event)'>
        <e-accumulation-series-collection>
            <e-accumulation-series [dataSource]='piedata' xName='x' yName='y' [dataLabel]='datalabel' radius="70%"></e-accumulation-series>
        </e-accumulation-series-collection>
    </ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
    public piedata?: Object[];
    public datalabel?: Object;
    public tooltip?: Object;
    public title?: String;
    public tooltipRender(args: IAccTooltipRenderEventArgs): void {
           let value  = args.point.y / args.series.sumOfPoints * 100;
           args["text"] = args.point.x + ' : ' + Math.ceil(value) + '' + '%';
        };
    ngOnInit(): void {
        this.datalabel = { visible: true };
        this.tooltip = {enable: true};
        this.title = 'Mobile Browser Statistics';
        this.piedata = [
                    { 'x': 'Chrome', y: 37 }, { 'x': 'UC Browser', y: 17 },
                    { 'x': 'iPhone', y: 19 }, { 'x': 'Others', y: 4 }, { 'x': 'Opera', y: 11 }
                ];
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Tooltip format in Angular Chart component

Use the tooltipRender event to read the current point’s x value and format it with formatDate for display in the tooltip.

The output will appear as follows,

import { ChartModule, ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import {
    LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService, CategoryService,
    StepAreaSeriesService, SplineSeriesService, ScrollBarService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
    SelectionService, ScatterSeriesService, ZoomService, ColumnSeriesService, AreaSeriesService, RangeAreaSeriesService
} from '@syncfusion/ej2-angular-charts'


import { Component, OnInit } from '@angular/core';
import { ITooltipRenderEventArgs } from '@syncfusion/ej2-angular-charts';
import { Internationalization } from '@syncfusion/ej2-base';

@Component({
imports: [
         ChartModule, ChartAllModule, AccumulationChartAllModule, AccumulationChartModule
    ],

providers: [LineSeriesService, DateTimeService, ColumnSeriesService, DataLabelService, ZoomService, StackingColumnSeriesService, CategoryService,
        StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
        PieSeriesService, AccumulationTooltipService, ScrollBarService, AccumulationDataLabelService, SelectionService, ScatterSeriesService,
        AreaSeriesService, RangeAreaSeriesService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [tooltip]='tooltip' (tooltipRender) = 'tooltipRender($event)'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' name='India' width=2 [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public tooltip?: Object;
    public primaryYAxis?: Object;
    public tooltipRender(args: ITooltipRenderEventArgs | any): void {
        let intl: Internationalization = new Internationalization();
        let formattedString: string = intl.formatDate(new Date((args.point.x).toString()), { skeleton: 'MMMEd'});
        args.text = formattedString + ':' + args.text.split(':')[1];
    };
    ngOnInit(): void {
        this.chartData = [
             { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
             { x: new Date(2007, 0, 1), y: 30 }, { x: new Date(2008, 0, 1), y: 38 },
             { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
        ];
        this.primaryXAxis = {
           title: 'Year',
           valueType: 'DateTime'
        };
        this.primaryYAxis = {
           title: 'Efficiency',
        };
        this.marker = { visible: true, width: 10, height: 10, dataLabel: { visible: true}};
        this.title = 'Inflation - Consumer Price';
        this.tooltip = {enable: true}
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Tooltip as table in Angular Chart component

Render a table in the tooltip using the tooltip template.

  • Define the template HTML as shown below.
  • Assign the template’s element id to the tooltip template property.
   <script id="Female-Material" type="text/x-template">
    <div id='templateWrap'>
        <table style="width:100%;  border: 1px solid black;">
        <tr><th colspan="2" bgcolor="#00FFFF">Female</th></tr>
        <tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
        </table>
    </div>
   </script>


import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService, CategoryService, ChartShape,
       StepAreaSeriesService,ChartAnnotationService, LegendService, TooltipService} from '@syncfusion/ej2-angular-charts'


import { Component, OnInit } from '@angular/core';
import { IPointRenderEventArgs } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         ChartModule
    ],

providers: [ LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService,CategoryService,
               StepAreaSeriesService,ChartAnnotationService, LegendService, TooltipService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'  [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' name='Female' width=2 [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public tooltip?: Object;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData =[
                    { x: 2010, y: 990 }, { x: 2011, y: 1010 },
                    { x: 2012, y: 1030 }, { x: 2013, y: 1070 },
                    { x: 2014, y: 1105 }, { x: 2015, y: 1138 },
                    { x: 2016, y: 1155 }
                ];
        this.primaryXAxis = {
           minimum: 2010, maximum: 2016,
          edgeLabelPlacement: 'Shift',
        };
        this.primaryYAxis = {
            minimum: 900, maximum: 1300,
            labelFormat: '{value}M',
        };
        this.marker = { visible: true, width: 10, height: 10, shape: 'Rectangle'};
        this.tooltip = {
            enable: true,
            template:'#Female-Material'
            }
        this.title = 'Population of India ( 2010 - 2016 )';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Closest tooltip

The showNearestTooltip property displays the tooltip for the data point nearest to the mouse pointer, even when the pointer is not directly positioned over the point.

import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { DateTimeService, StepLineSeriesService, LegendService, TooltipService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
    imports: [ChartModule],
    providers: [DateTimeService, StepLineSeriesService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings' [tooltip]='tooltip'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2 name='China' [marker]='marker'></e-series>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y1' width=2 name='Australia' [marker]='marker'></e-series>
            <e-series [dataSource]='chartData' type='StepLine' xName='x' yName='y2' width=2 name='Japan' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public tooltip?: Object;
    public legendSettings?: Object;
    ngOnInit(): void {
        this.chartData = chartData;
        this.primaryXAxis = {
            title: 'Years',
            lineStyle: { width: 0 },
            labelFormat: 'y',
            intervalType: 'Years',
            valueType: 'DateTime',
            edgeLabelPlacement: 'Shift'
        };
        this.primaryYAxis = {
            title: 'Percentage (%)',
            minimum: 0,
            maximum: 20,
            interval: 4,
            labelFormat: '{value}%'
        };
        this.tooltip = { enable: true, enableHighlight: true, showNearestTooltip: true };
        this.marker = { visible: true, width: 10, height: 10 };
        this.title = 'Unemployment Rates 1975-2010';
        this.legendSettings = { visible: true };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Split Tooltip

The split tooltip displays a separate tooltip for each series at the same data point, making it easier to compare values across multiple series.

Enable this feature by setting the split property to true in the tooltip configuration.

import { Component, OnInit } from '@angular/core';
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { LineSeriesService, CategoryService, TooltipService, LegendService } from '@syncfusion/ej2-angular-charts';

import { vietnamData, indonesiaData, franceData, polandData, mexicoData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [LineSeriesService, CategoryService, TooltipService, LegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="charts" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis"
        [legendSettings]="legendSettings" [tooltip]="tooltip">
        <e-series-collection>
            <e-series [dataSource]="vietnamData" type="Line" xName="x" yName="y" name="Vietnam" [marker]="marker"></e-series>
            <e-series [dataSource]="indonesiaData" type="Line" xName="x" yName="y" name="Indonesia" [marker]="marker"></e-series>
            <e-series [dataSource]="franceData" type="Line" xName="x" yName="y" name="France" [marker]="marker"></e-series>
            <e-series [dataSource]="polandData" type="Line" xName="x" yName="y" name="Poland" [marker]="marker"></e-series>
            <e-series [dataSource]="mexicoData" type="Line" xName="x" yName="y" name="Mexico" [marker]="marker"></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public marker?: Object;

    public vietnamData?: Object[];
    public indonesiaData?: Object[];
    public franceData?: Object[];
    public polandData?: Object[];
    public mexicoData?: Object[];

    ngOnInit(): void {
        this.vietnamData = vietnamData;
        this.indonesiaData = indonesiaData;
        this.franceData = franceData;
        this.polandData = polandData;
        this.mexicoData = mexicoData;

        this.primaryXAxis = {
            valueType: 'Category'
        };

        this.primaryYAxis = {
            title: 'Value'
        };

        this.legendSettings = {
            visible: true
        };

        this.tooltip = {
            enable: true,
            split: true
        };

        this.marker = {
            visible: true
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let vietnamData: { x: number; y: number }[] = [
    { x: 2016, y: 7.8 }, { x: 2017, y: 10.3 }, { x: 2018, y: 15.5 },
    { x: 2019, y: 17.5 }, { x: 2020, y: 19.5 }, { x: 2021, y: 23.0 },
    { x: 2022, y: 20.0 }, { x: 2023, y: 19.0 }, { x: 2024, y: 22.1 }
];

export let indonesiaData: { x: number; y: number }[] = [
    { x: 2016, y: 4.8 }, { x: 2017, y: 5.2 }, { x: 2018, y: 6.2 },
    { x: 2019, y: 7.8 }, { x: 2020, y: 9.3 }, { x: 2021, y: 14.3 },
    { x: 2022, y: 15.6 }, { x: 2023, y: 16.0 }, { x: 2024, y: 17.0 }
];

export let franceData: { x: number; y: number }[] = [
    { x: 2016, y: 14.6 }, { x: 2017, y: 15.5 }, { x: 2018, y: 15.4 },
    { x: 2019, y: 14.4 }, { x: 2020, y: 11.6 }, { x: 2021, y: 13.9 },
    { x: 2022, y: 12.1 }, { x: 2023, y: 10.0 }, { x: 2024, y: 10.8 }
];

export let polandData: { x: number; y: number }[] = [
    { x: 2016, y: 8.9 }, { x: 2017, y: 10.3 }, { x: 2018, y: 10.8 },
    { x: 2019, y: 9.0 }, { x: 2020, y: 7.9 }, { x: 2021, y: 8.5 },
    { x: 2022, y: 7.4 }, { x: 2023, y: 6.4 }, { x: 2024, y: 7.1 }
];

export let mexicoData: { x: number; y: number }[] = [
    { x: 2016, y: 19.0 }, { x: 2017, y: 20.0 }, { x: 2018, y: 20.2 },
    { x: 2019, y: 18.4 }, { x: 2020, y: 16.8 }, { x: 2021, y: 18.5 },
    { x: 2022, y: 18.4 }, { x: 2023, y: 16.3 }, { x: 2024, y: 13.7 }
];

Follow pointer

The follow pointer feature enables the tooltip to follow the mouse cursor or touch pointer as users interact with the chart. This provides a more dynamic and intuitive experience by keeping the tooltip close to the user’s point of interaction.
Enable this feature by setting the followPointer property to true

import { Component, OnInit } from '@angular/core';
import { ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { ColumnSeriesService, CategoryService, TooltipService, LegendService } from '@syncfusion/ej2-angular-charts';

import { vietnamData, franceData, mexicoData } from './datasource';

@Component({
    imports: [
        ChartAllModule
    ],
    providers: [ColumnSeriesService, CategoryService, TooltipService, LegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="charts" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis"
        [legendSettings]="legendSettings" [tooltip]="tooltip">
        <e-series-collection>
            <e-series [dataSource]="vietnamData" type="Column" xName="x" yName="y" name="Vietnam" [marker]="marker"></e-series>
            <e-series [dataSource]="franceData" type="Column" xName="x" yName="y" name="France" [marker]="marker"></e-series>
            <e-series [dataSource]="mexicoData" type="Column" xName="x" yName="y" name="Mexico" [marker]="marker"></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public marker?: Object;

    public vietnamData?: Object[];
    public franceData?: Object[];
    public mexicoData?: Object[];

    ngOnInit(): void {
        this.vietnamData = vietnamData;
        this.franceData = franceData;
        this.mexicoData = mexicoData;

        this.primaryXAxis = {
            valueType: 'Category'
        };

        this.primaryYAxis = {
            title: 'Value'
        };

        this.legendSettings = {
            visible: true
        };

        this.tooltip = {
            enable: true,
            followPointer: true
        };

        this.marker = {
            visible: true
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let vietnamData: { x: number; y: number }[] = [
    { x: 2016, y: 7.8 }, { x: 2017, y: 10.3 }, { x: 2018, y: 15.5 },
    { x: 2019, y: 17.5 }, { x: 2020, y: 19.5 }, { x: 2021, y: 23.0 },
    { x: 2022, y: 20.0 }, { x: 2023, y: 19.0 }, { x: 2024, y: 22.1 }
];

export let franceData: { x: number; y: number }[] = [
    { x: 2016, y: 14.6 }, { x: 2017, y: 15.5 }, { x: 2018, y: 15.4 },
    { x: 2019, y: 14.4 }, { x: 2020, y: 11.6 }, { x: 2021, y: 13.9 },
    { x: 2022, y: 12.1 }, { x: 2023, y: 10.0 }, { x: 2024, y: 10.8 }
];

export let mexicoData: { x: number; y: number }[] = [
    { x: 2016, y: 19.0 }, { x: 2017, y: 20.0 }, { x: 2018, y: 20.2 },
    { x: 2019, y: 18.4 }, { x: 2020, y: 16.8 }, { x: 2021, y: 18.5 },
    { x: 2022, y: 18.4 }, { x: 2023, y: 16.3 }, { x: 2024, y: 13.7 }
];


export let indonesiaData: { x: number; y: number }[] = [
    { x: 2016, y: 4.8 }, { x: 2017, y: 5.2 }, { x: 2018, y: 6.2 },
    { x: 2019, y: 7.8 }, { x: 2020, y: 9.3 }, { x: 2021, y: 14.3 },
    { x: 2022, y: 15.6 }, { x: 2023, y: 16.0 }, { x: 2024, y: 17.0 }
];

export let polandData: { x: number; y: number }[] = [
    { x: 2016, y: 8.9 }, { x: 2017, y: 10.3 }, { x: 2018, y: 10.8 },
    { x: 2019, y: 9.0 }, { x: 2020, y: 7.9 }, { x: 2021, y: 8.5 },
    { x: 2022, y: 7.4 }, { x: 2023, y: 6.4 }, { x: 2024, y: 7.1 }
];

Tooltip Distance

The tooltip distance property controls the spacing between the tooltip and the mouse pointer or target data point. This prevents the tooltip from overlapping with the cursor or nearby chart elements, improving readability.
Set the distance property to specify the gap in pixels.

import { Component, OnInit } from '@angular/core';
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { ColumnSeriesService, CategoryService, TooltipService, LegendService } from '@syncfusion/ej2-angular-charts';

import { vietnamData, polandData } from './datasource';

@Component({
    imports: [
        ChartModule
    ],
    providers: [ColumnSeriesService, CategoryService, TooltipService, LegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="charts" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis"
        [legendSettings]="legendSettings" [tooltip]="tooltip">
        <e-series-collection>
            <e-series [dataSource]="vietnamData" type="Column" xName="x" yName="y" name="Vietnam" [marker]="marker"></e-series>
            <e-series [dataSource]="polandData" type="Column" xName="x" yName="y" name="Poland" [marker]="marker"></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public legendSettings?: Object;
    public tooltip?: Object;
    public marker?: Object;

    public vietnamData?: Object[];
    public polandData?: Object[];

    ngOnInit(): void {
        this.vietnamData = vietnamData;
        this.polandData = polandData;

        this.primaryXAxis = {
            valueType: 'Category'
        };

        this.primaryYAxis = {
            title: 'Value'
        };

        this.legendSettings = {
            visible: true
        };

        this.tooltip = {
            enable: true,
            distance: 20
        };

        this.marker = {
            visible: true
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let vietnamData: { x: number; y: number }[] = [
    { x: 2016, y: 7.8 }, { x: 2017, y: 10.3 }, { x: 2018, y: 15.5 },
    { x: 2019, y: 17.5 }, { x: 2020, y: 19.5 }, { x: 2021, y: 23.0 },
    { x: 2022, y: 20.0 }, { x: 2023, y: 19.0 }, { x: 2024, y: 22.1 }
];

export let polandData: { x: number; y: number }[] = [
    { x: 2016, y: 8.9 }, { x: 2017, y: 10.3 }, { x: 2018, y: 10.8 },
    { x: 2019, y: 9.0 }, { x: 2020, y: 7.9 }, { x: 2021, y: 8.5 },
    { x: 2022, y: 7.4 }, { x: 2023, y: 6.4 }, { x: 2024, y: 7.1 }
];

// The other datasets (indonesiaData, franceData, mexicoData) are included in the provided file but not used here → kept for completeness
export let indonesiaData: { x: number; y: number }[] = [
    { x: 2016, y: 4.8 }, { x: 2017, y: 5.2 }, { x: 2018, y: 6.2 },
    { x: 2019, y: 7.8 }, { x: 2020, y: 9.3 }, { x: 2021, y: 14.3 },
    { x: 2022, y: 15.6 }, { x: 2023, y: 16.0 }, { x: 2024, y: 17.0 }
];

export let franceData: { x: number; y: number }[] = [
    { x: 2016, y: 14.6 }, { x: 2017, y: 15.5 }, { x: 2018, y: 15.4 },
    { x: 2019, y: 14.4 }, { x: 2020, y: 11.6 }, { x: 2021, y: 13.9 },
    { x: 2022, y: 12.1 }, { x: 2023, y: 10.0 }, { x: 2024, y: 10.8 }
];

export let mexicoData: { x: number; y: number }[] = [
    { x: 2016, y: 19.0 }, { x: 2017, y: 20.0 }, { x: 2018, y: 20.2 },
    { x: 2019, y: 18.4 }, { x: 2020, y: 16.8 }, { x: 2021, y: 18.5 },
    { x: 2022, y: 18.4 }, { x: 2023, y: 16.3 }, { x: 2024, y: 13.7 }
];

See Also