Synchronizing Chart Panning Between Angular Charts

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Chart

Description

I have two Kendo UI for Angular Charts in my application and would like to synchronize their panning behavior. When I pan one chart, I want the other chart to follow the same panning action. How can I achieve this synchronization between two Angular Charts?

This knowledge base article also answers the following questions:

• How can I synchronize two Kendo UI for Angular Charts when panning?
• Can the drag event of a Kendo UI for Angular Chart be used to synchronize another chart's view?
• How to update the min and max values of the category axis of a Kendo UI for Angular Chart based on the drag event?

Solution

To synchronize panning between two Kendo UI for Angular Charts, you can handle the drag event of one chart and update the min and max values of the category axis of the other chart. This approach ensures that both charts stay in sync when panning.

Follow the steps below to synchronize panning between two Angular Charts with date category axes:

1. Create two Kendo UI for Angular Charts with date category axes.

   html

   <kendo-chart [categoryAxis]="categoryAxis">
     <kendo-chart-series>
       <kendo-chart-series-item 
       [data]="data" 
       field="value" 
       categoryField="category"
       >
       </kendo-chart-series-item>
     </kendo-chart-series>
   </kendo-chart>
   
   <kendo-chart [categoryAxis]="categoryAxis2">
     <kendo-chart-series>
       <kendo-chart-series-item 
       [data]="data" 
       field="value" 
       categoryField="category"
       >
       </kendo-chart-series-item>
     </kendo-chart-series>
   </kendo-chart>

   ts

   public data = // your data here. For example:
   //[
   //{ category: new Date(2025, 0, 1), value: 1 },
   //{ category: new Date(2025, 0, 2), value: 2 },
   //{ category: new Date(2025, 0, 3), value: 3 },
   //{ category: new Date(2025, 0, 4), value: 4 },
   //{ category: new Date(2025, 0, 5), value: 5 },
   //{ category: new Date(2025, 0, 6), value: 6 },
   //];
   public categoryAxis = {
     name: 'category',
     min: new Date(2025, 0, 1),
     max: new Date(2025, 1, 0),
     maxDivisions: 10,
   };
   
   public categoryAxis2 = {
     name: 'category',
     min: new Date(2025, 0, 1),
     max: new Date(2025, 1, 0),
     maxDivisions: 10,
   };

2. Enable panning for both charts by setting the pannable property to true, and disable Chart animations by setting the transitions property to false.

   html

   <kendo-chart [pannable]="true" [transitions]="false">
   </kendo-chart>
   
   <kendo-chart [pannable]="true" [transitions]="false">
   </kendo-chart>

3. Handle the drag event of both Charts and update the min and max values depending on which chart is being panned.

   html

   <kendo-chart (drag)="onDrag($event, 'chartOne')">
   </kendo-chart>
   
   <kendo-chart (drag)="onDrag($event, 'chartTwo')">
   </kendo-chart>

   ts

   public onDrag(args: DragEvent, chartName: string): void {
     if (chartName === 'chartOne') {
       this.categoryAxis2 = {
         ...this.categoryAxis2,
         max: args.axisRanges['category'].max as Date,
         min: args.axisRanges['category'].min as Date,
       };
     } else if (chartName === 'chartTwo') {
       this.categoryAxis = {
         ...this.categoryAxis,
         max: args.axisRanges['category'].max as Date,
         min: args.axisRanges['category'].min as Date,
       };
     }
   }

4. (Optional) Render the Charts in canvas mode for better performance.

   html

   <kendo-chart renderAs="canvas">
   </kendo-chart>
   
   <kendo-chart renderAs="canvas">
   </kendo-chart>

The following example demonstrates how to synchronize panning between two Kendo UI for Angular Charts.

Change Theme

Theme

Loading ...

See Also

• Angular Charts Overview
• Chart Pan and Zoom
• Chart Axes Overview
• Kendo UI for Angular Charts API