diff --git a/packages/core/src/ui/components/metrics/throughput-chart.tsx b/packages/core/src/ui/components/metrics/throughput-chart.tsx
index fff9d87..28cad63 100644
--- a/packages/core/src/ui/components/metrics/throughput-chart.tsx
+++ b/packages/core/src/ui/components/metrics/throughput-chart.tsx
@@ -172,23 +172,26 @@ export function ThroughputChart({
               />
             </pattern>
           </defs>
+          {/* Failed renders first so it stacks at the bottom: with zero
+              failures its stroke is a flat line on the axis instead of
+              tracing the top of the completed area in red (#30). */}
           <Area
             type="monotone"
-            dataKey="completed"
-            name="Completed"
+            dataKey="failed"
+            name="Failed"
             stackId="1"
-            stroke="var(--color-completed)"
-            fill={`url(#${chartId}-completedGradient)`}
+            stroke="var(--color-failed)"
+            fill={`url(#${chartId}-failedPattern)`}
             strokeWidth={2}
             dot={false}
           />
           <Area
             type="monotone"
-            dataKey="failed"
-            name="Failed"
+            dataKey="completed"
+            name="Completed"
             stackId="1"
-            stroke="var(--color-failed)"
-            fill={`url(#${chartId}-failedPattern)`}
+            stroke="var(--color-completed)"
+            fill={`url(#${chartId}-completedGradient)`}
             strokeWidth={2}
             dot={false}
           />
diff --git a/packages/core/src/ui/pages/metrics.tsx b/packages/core/src/ui/pages/metrics.tsx
index 88e2c66..a1ae6d0 100644
--- a/packages/core/src/ui/pages/metrics.tsx
+++ b/packages/core/src/ui/pages/metrics.tsx
@@ -455,33 +455,36 @@ export function MetricsPage() {
                   />
                 </pattern>
               </defs>
+              {/* Failed renders first so it stacks at the bottom: with zero
+                  failures its stroke is a flat line on the axis instead of
+                  tracing the top of the completed area in red (#30). */}
               <Area
                 type="monotone"
-                dataKey="completed"
-                name="Completed"
+                dataKey="failed"
+                name="Failed"
                 stackId="1"
-                stroke="var(--color-completed)"
-                fill="url(#completedGradient)"
+                stroke="var(--color-failed)"
+                fill="url(#failedPattern)"
                 strokeWidth={2}
                 dot={false}
                 activeDot={{
                   r: 4,
-                  fill: "var(--color-completed)",
+                  fill: "var(--color-failed)",
                   stroke: "none",
                 }}
               />
               <Area
                 type="monotone"
-                dataKey="failed"
-                name="Failed"
+                dataKey="completed"
+                name="Completed"
                 stackId="1"
-                stroke="var(--color-failed)"
-                fill="url(#failedPattern)"
+                stroke="var(--color-completed)"
+                fill="url(#completedGradient)"
                 strokeWidth={2}
                 dot={false}
                 activeDot={{
                   r: 4,
-                  fill: "var(--color-failed)",
+                  fill: "var(--color-completed)",
                   stroke: "none",
                 }}
               />