diff --git a/doc/documentation.md b/doc/documentation.md
index 5065f9d..b6f2726 100644
--- a/doc/documentation.md
+++ b/doc/documentation.md
@@ -40,6 +40,7 @@ A reusable time axis component, that can be used independently of the other comp
 * Horizontal zooming can be performed using Ctrl+mouse wheel. The zooming is centered on the mouse cursor position.
 * Horizontal panning can be performed using the middle mouse button or Ctrl+left mouse button.
 * Horizontal zooming selection can be performed using the right mouse button.
+* Horizontal zooming can be cancelled by pressing the `esc` button while zooming using the right click + drag.
 * The view is connected to a time controller instance and synchronizes its viewport, zoom level cursors bi-directionally.
 
 ## Data Model
diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts
index f2b1c85..81db0ac 100644
--- a/timeline-chart/src/layer/time-graph-chart.ts
+++ b/timeline-chart/src/layer/time-graph-chart.ts
@@ -155,6 +155,11 @@ export class TimeGraphChart extends TimeGraphChartLayer {
                 }
                 event.preventDefault();
             }
+            if (keyPressed === 'Escape' && this.mouseZooming) {
+                this.mouseZooming = false;
+                this.stage.cursor = 'default';
+                this.updateZoomingSelection();
+            }
         };
         this._keyUpHandler = (event: KeyboardEvent) => {
             const keyPressed = event.key;