Customizing Shared Tooltips in Kendo UI for Angular Charts

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Charts

Description

In a Kendo UI for Angular Chart, the shared tooltip displays information about multiple series within the same category. You can customize the shared tooltip to include additional information, such as a goal line at the top and a total at the bottom.

This knowledge base article also answers the following questions:

• How can I display a custom header and footer in a shared tooltip for Kendo UI for Angular Charts?
• How to include dynamic data, like totals, in shared tooltips in Angular Charts?
• How can I customize the shared tooltip in Kendo UI for Angular Charts?

Solution

To customize the shared tooltip in Angular Charts to include a goal line at the top and a total at the bottom, follow these steps:

1. Utilize the kendoChartSharedTooltipTemplate directive to define a custom shared tooltip template.

   html

   <kendo-chart>
     <kendo-chart-tooltip [shared]="true">
       <ng-template
         kendoChartSharedTooltipTemplate
         let-category="category"
         let-points="points">
         <div class="tooltip-header">
           Goal: $100
         </div>
         <div>{{ category }}</div>
         <div *ngFor="let point of points">
           {{ point.series.name }} : {{ point.value }}
         </div>
         <div class="tooltip-footer">
           Total: {{ getTotal(category) }}
         </div>
       </ng-template>
     </kendo-chart-tooltip>
   </kendo-chart>

2. Dynamically calculate the total for the data items within the component by adding a method that calculates the total for a specific category or by using a custom Angular pipe. For example, the following method calculates the total for a specific category:

   typescript

   public getTotal(category: string): number {
     const categoryIndex = this.categoryAxis.categories.indexOf(category);
     return this.series.reduce((total, series) => {
       total += series.data[categoryIndex];
       return total;
     }, 0);
   }

3. (Optional) Add custom styles to the tooltip content depending on your application's design.

The following example demonstrates the shared tooltip customization in action:

Change Theme

Theme

Loading ...

See Also

• Angular Chart Tooltips
• Angular Chart Elements