diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 4ce490227ee7..144e74f30c39 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -64,8 +64,8 @@ function metricToSpecData(
     yTitle: string,
     transform?: (param: number) => number
 ) {
-    const wallclock = jobMetrics?.filter((jobMetric) => jobMetric.name == metricName);
-    const values = wallclock?.map((item) => {
+    const thisMetric = jobMetrics?.filter((jobMetric) => jobMetric.name == metricName);
+    const values = thisMetric?.map((item) => {
         let y = parseFloat(item.raw_value);
         if (transform !== undefined) {
             y = transform(y);
@@ -84,6 +84,38 @@ function metricToSpecData(
     };
 }
 
+function metricToAggregateData(
+    jobMetrics: components["schemas"]["WorkflowJobMetric"][] | undefined,
+    metricName: string,
+    yTitle: string,
+    transform?: (param: number) => number
+) {
+    const thisMetric = jobMetrics?.filter((jobMetric) => jobMetric.name == metricName);
+    const aggregateByX: Record<string, number> = {};    
+    thisMetric?.forEach((item) => {
+        let y = parseFloat(item.raw_value);
+        if (transform !== undefined) {
+            y = transform(y);
+        }
+        const x = itemToX(item);
+        if (!(x in aggregateByX)) {
+            aggregateByX[x] = 0;
+        }
+        aggregateByX[x] += y;
+    });
+    const values = aggregateByX.map((key, value) => {
+        return {
+            y: value,
+            x: key,
+        };        
+    })
+    return {
+        x_title: attributeToLabel[groupBy.value],
+        y_title: yTitle,
+        values,
+    };
+}
+
 const wallclock: ComputedRef<boxplotData> = computed(() => {
     return metricToSpecData(jobMetrics.value, "runtime_seconds", "Runtime (in Seconds)");
 });