diff --git a/angular.json b/angular.json
index daa02deb9f77b04e2cb9ccf9839352466f7cdaf5..5482a7544c7eb2f297d410be6b225f995c3b1de9 100644
--- a/angular.json
+++ b/angular.json
@@ -32,7 +32,9 @@
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/primeng/resources/themes/nova-light/theme.css"
             ],
-            "scripts": [],
+            "scripts": [
+              "node_modules/chartjs-plugin-zoom/chartjs-plugin-zoom.min.js"
+            ],
             "showCircularDependencies": false
           },
           "configurations": {
diff --git a/package-lock.json b/package-lock.json
index 72d12202a4b58cec9399e6f57b455428be2edaf3..23fc51a4600763f6611275c96aae80776545573a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3417,6 +3417,14 @@
         "color-name": "^1.0.0"
       }
     },
+    "chartjs-plugin-zoom": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-0.7.2.tgz",
+      "integrity": "sha512-5AtMCjlBlRsA/vxlvcBsAYKbkk0tVYE6+XX9M9LE6aSqbjqGR5NUQwYH0YvvvpmJjTZfB+HDhHaaGxJ/8aGaaw==",
+      "requires": {
+        "hammerjs": "^2.0.8"
+      }
+    },
     "cheerio": {
       "version": "1.0.0-rc.2",
       "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",
diff --git a/package.json b/package.json
index e39372066ebc30346e11099c74ee57aad18651c9..d3fda3c44d5c03a20718e9a468395292af30a4d4 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@types/pako": "^1.0.1",
     "@types/sprintf-js": "^1.1.2",
     "angular2-chartjs": "^0.5.1",
+    "chartjs-plugin-zoom": "^0.7.2",
     "cordova-android": "^8.0.0",
     "cordova-plugin-device": "^2.0.2",
     "core-js": "^2.6.5",
diff --git a/src/app/components/pab-profile-graph/pab-profile-graph.component.html b/src/app/components/pab-profile-graph/pab-profile-graph.component.html
index bfbe7c551a39c3c855317577d5c39fd64040f610..954f059c117f46d3597047255bd20959b77187c0 100644
--- a/src/app/components/pab-profile-graph/pab-profile-graph.component.html
+++ b/src/app/components/pab-profile-graph/pab-profile-graph.component.html
@@ -1,6 +1,9 @@
 <div class="graph-results-container" #graphProfile fxLayout="row wrap" fxLayoutAlign="center center">
     <div fxFlex="1 1 100%">
         <div class="graph-profile-buttons">
+            <button mat-icon-button (click)="resetZoom()">
+                <mat-icon color="primary">replay</mat-icon>
+            </button>
             <button mat-icon-button (click)="exportAsImage(graphProfile)">
                 <mat-icon color="primary">image</mat-icon>
             </button>
@@ -15,4 +18,4 @@
         <chart type="scatter" [data]="graph_data" [options]="graph_options" #graphChart>
         </chart>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/pab-profile-graph/pab-profile-graph.component.ts b/src/app/components/pab-profile-graph/pab-profile-graph.component.ts
index 9c61cf60928e22db75be7fb878fe3b0c186e27dc..526b2d9fd1105dff3ed47a0a98a594810420a199 100644
--- a/src/app/components/pab-profile-graph/pab-profile-graph.component.ts
+++ b/src/app/components/pab-profile-graph/pab-profile-graph.component.ts
@@ -1,4 +1,6 @@
-import { Component } from "@angular/core";
+import { Component, ViewChild } from "@angular/core";
+
+import { ChartComponent } from "angular2-chartjs";
 
 import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
 import { I18nService } from "../../services/internationalisation/internationalisation.service";
@@ -14,6 +16,9 @@ import { PabResults } from "../../results/pab-results";
 })
 export class PabProfileGraphComponent extends ResultsComponent {
 
+    @ViewChild(ChartComponent)
+    private chartComponent;
+
     private _results: PabResults;
 
     /** size of the longest variable value */
@@ -79,6 +84,22 @@ export class PabProfileGraphComponent extends ResultsComponent {
                 }
             }]
         };
+        // enable zoom and pan (using "chartjs-plugin-zoom" package)
+        this.graph_options["plugins"] = {
+            zoom: {
+                pan: {
+                    enabled: true,
+                    mode: "xy",
+                },
+                zoom: {
+                    enabled: true,
+                    drag: false, // conflicts with pan; set to false to enable mouse wheel zoom
+                    mode: "xy",
+                    // percentage of zoom on a wheel event
+                    speed: 0.1,
+                }
+            }
+        };
     }
 
     public set results(r: PabResults) {
@@ -170,6 +191,10 @@ export class PabProfileGraphComponent extends ResultsComponent {
         }); // defaults to image/png
     }
 
+    public resetZoom() {
+        this.chartComponent.chart.resetZoom();
+    }
+
     private getXSeries(): string[] {
         const data: string[] = [];
         const nDigits = this.appSetupService.displayDigits;
diff --git a/src/main.ts b/src/main.ts
index 9b8fff7b96bcd6f42218db26ef282901d5136450..018a6f867c32a3cbe4b9eee6682ce72c5b18614a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,8 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import { AppModule } from "./app/app.module";
 import { environment } from "./environments/environment";
 
+import "chartjs-plugin-zoom";
+
 if (environment.production) {
   enableProdMode();
 }