diff --git a/hack/jenkins/test-flake-chart/flake_chart.js b/hack/jenkins/test-flake-chart/flake_chart.js
index f6d16313dd..ff67b2c3a2 100644
--- a/hack/jenkins/test-flake-chart/flake_chart.js
+++ b/hack/jenkins/test-flake-chart/flake_chart.js
@@ -334,40 +334,87 @@ function displayEnvironmentChart(testData, environmentName) {
     .slice(0, topFlakes)
     .map(({testName}) => testName);
 
-  const data = new google.visualization.DataTable();
-  data.addColumn('date', 'Date');
-  for (const name of recentTopFlakes) {
-    data.addColumn('number', `Flake Percentage - ${name}`);
-    data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
-  }
-  data.addRows(
-    orderedDates.map(dateTime => [new Date(dateTime)].concat(recentTopFlakes.map(name => {
-      const data = aggregatedRuns.get(name).get(dateTime);
-      return data !== undefined ? [
-        data.flakeRate,
-        `<div style="padding: 1rem; font-family: 'Arial'; font-size: 14">
+  const chartsContainer = document.getElementById('chart_div');
+  {
+    const data = new google.visualization.DataTable();
+    data.addColumn('date', 'Date');
+    for (const name of recentTopFlakes) {
+      data.addColumn('number', `Flake Percentage - ${name}`);
+      data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
+    }
+    data.addRows(
+      orderedDates.map(dateTime => [new Date(dateTime)].concat(recentTopFlakes.map(name => {
+        const data = aggregatedRuns.get(name).get(dateTime);
+        return data !== undefined ? [
+          data.flakeRate,
+          `<div style="padding: 1rem; font-family: 'Arial'; font-size: 14">
           <b style="display: block">${name}</b><br>
           <b>${data.date.toString()}</b><br>
           <b>Flake Percentage:</b> ${data.flakeRate.toFixed(2)}%<br>
           <b>Hashes:</b><br>
           ${data.commitHashes.map(({ hash, failures, runs }) => `  - <a href="${hashToLink(hash, environmentName)}">${hash}</a> (Failures: ${failures}/${runs})`).join("<br>")}
         </div>`
-      ] : [null, null];
-    })).flat())
-  );
-  const options = {
-    title: `Flake rate by day of top ${topFlakes} of recent test flakiness (past ${dateRange} days) on ${environmentName}`,
-    width: window.innerWidth,
-    height: window.innerHeight,
-    pointSize: 10,
-    pointShape: "circle",
-    vAxes: {
-      0: { title: "Flake rate", minValue: 0, maxValue: 100 },
-    },
-    tooltip: { trigger: "selection", isHtml: true }
-  };
-  const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
-  chart.draw(data, options);
+        ] : [null, null];
+      })).flat())
+    );
+    const options = {
+      title: `Flake rate by day of top ${topFlakes} of recent test flakiness (past ${dateRange} days) on ${environmentName}`,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      pointSize: 10,
+      pointShape: "circle",
+      vAxes: {
+        0: { title: "Flake rate", minValue: 0, maxValue: 100 },
+      },
+      tooltip: { trigger: "selection", isHtml: true }
+    };
+    const flakeRateContainer = document.createElement("div");
+    flakeRateContainer.style.width = "100vw";
+    flakeRateContainer.style.height = "100vh";
+    chartsContainer.appendChild(flakeRateContainer);
+    const chart = new google.visualization.LineChart(flakeRateContainer);
+    chart.draw(data, options);
+  }
+  {
+    const data = new google.visualization.DataTable();
+    data.addColumn('date', 'Date');
+    for (const name of recentTopFlakes) {
+      data.addColumn('number', `Duration - ${name}`);
+      data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
+    }
+    data.addRows(
+      orderedDates.map(dateTime => [new Date(dateTime)].concat(recentTopFlakes.map(name => {
+        const data = aggregatedRuns.get(name).get(dateTime);
+        return data !== undefined ? [
+          data.duration,
+          `<div style="padding: 1rem; font-family: 'Arial'; font-size: 14">
+          <b style="display: block">${name}</b><br>
+          <b>${data.date.toString()}</b><br>
+          <b>Average Duration:</b> ${data.duration.toFixed(2)}s<br>
+          <b>Hashes:</b><br>
+          ${data.commitHashes.map(({ hash, duration, runs }) => `  - <a href="${hashToLink(hash, environmentName)}">${hash}</a> (Average Duration: ${duration.toFixed(2)}s [${runs} runs])`).join("<br>")}
+        </div>`
+        ] : [null, null];
+      })).flat())
+    );
+    const options = {
+      title: `Average duration by day of top ${topFlakes} of recent test flakiness (past ${dateRange} days) on ${environmentName}`,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      pointSize: 10,
+      pointShape: "circle",
+      vAxes: {
+        0: { title: "Average Duration (s)" },
+      },
+      tooltip: { trigger: "selection", isHtml: true }
+    };
+    const durationContainer = document.createElement("div");
+    durationContainer.style.width = "100vw";
+    durationContainer.style.height = "100vh";
+    chartsContainer.appendChild(durationContainer);
+    const chart = new google.visualization.LineChart(durationContainer);
+    chart.draw(data, options);
+  }
 
   document.body.appendChild(createRecentFlakePercentageTable(recentFlakePercentage, previousFlakePercentageMap, environmentName));
 }