diff --git a/src/default_index_html.ts b/src/default_index_html.ts
index e65c50223..dba84cbaf 100644
--- a/src/default_index_html.ts
+++ b/src/default_index_html.ts
@@ -105,6 +105,7 @@ export const DEFAULT_INDEX_HTML = String.raw`<!DOCTYPE html>
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.2/dist/Chart.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7/dist/chartjs-plugin-zoom.min.js"></script>
     <script src="data.js"></script>
     <script id="main-script">
       'use strict';
@@ -165,9 +166,24 @@ export const DEFAULT_INDEX_HTML = String.raw`<!DOCTYPE html>
         function renderAllChars(dataSets) {
 
           function renderGraph(parent, name, dataset) {
+            const container = document.createElement('div');
+            container.style.display = 'flex';
+            container.style.flexDirection = 'column';
+            container.style.alignItems = 'center';
+            container.style.marginBottom = '16px';
+            parent.appendChild(container);
+
+            const resetBtn = document.createElement('button');
+            resetBtn.textContent = 'Reset Zoom';
+            resetBtn.style.alignSelf = 'flex-end';
+            resetBtn.style.marginBottom = '4px';
+            resetBtn.style.padding = '2px 8px';
+            resetBtn.style.fontSize = '0.75rem';
+            container.appendChild(resetBtn);
+
             const canvas = document.createElement('canvas');
             canvas.className = 'benchmark-chart';
-            parent.appendChild(canvas);
+            container.appendChild(canvas);
 
             const color = toolColors[dataset.length > 0 ? dataset[0].tool : '_'];
             const data = {
@@ -203,6 +219,18 @@ export const DEFAULT_INDEX_HTML = String.raw`<!DOCTYPE html>
                   }
                 ],
               },
+              plugins: {
+                zoom: {
+                  pan: {
+                    enabled: true,
+                    mode: 'x',
+                  },
+                  zoom: {
+                    enabled: true,
+                    mode: 'x',
+                  },
+                },
+              },
               tooltips: {
                 callbacks: {
                   afterTitle: items => {
@@ -217,6 +245,15 @@ export const DEFAULT_INDEX_HTML = String.raw`<!DOCTYPE html>
                     if (range) {
                       label += ' (' + range + ')';
                     }
+                    if (item.index > 0) {
+                      const prev = dataset[item.index - 1].bench.value;
+                      const curr = dataset[item.index].bench.value;
+                      if (prev > 0) {
+                        const diff = ((curr - prev) / prev) * 100;
+                        const sign = diff > 0 ? '+' : '';
+                        label += ' (' + sign + diff.toFixed(2) + '%)';
+                      }
+                    }
                     return label;
                   },
                   afterLabel: item => {
@@ -236,11 +273,17 @@ export const DEFAULT_INDEX_HTML = String.raw`<!DOCTYPE html>
               },
             };
 
-            new Chart(canvas, {
+            const chart = new Chart(canvas, {
               type: 'line',
               data,
               options,
             });
+
+            resetBtn.onclick = () => {
+              if (chart && typeof chart.resetZoom === 'function') {
+                chart.resetZoom();
+              }
+            };
           }
 
           function renderBenchSet(name, benchSet, main) {
@@ -258,7 +301,7 @@ export const DEFAULT_INDEX_HTML = String.raw`<!DOCTYPE html>
             setElem.appendChild(graphsElem);
 
             for (const [benchName, benches] of benchSet.entries()) {
-              renderGraph(graphsElem, benchName, benches)
+              renderGraph(graphsElem, benchName, benches);
             }
           }
 
