diff --git a/backend/public/js/costs.js b/backend/public/js/costs.js
index 0658743..aa15e88 100644
--- a/backend/public/js/costs.js
+++ b/backend/public/js/costs.js
@@ -81,9 +81,11 @@ function renderCostChart(serverParts, domainYear, total){
         return
     }
 
+    const sortedParts = [...parts].sort((a, b) => b.amount - a.amount)
+
     container.innerHTML = `
         <div class="cost-bar">
-            ${parts.map((part, index) => `
+            ${sortedParts.map(part => `
                 <div class="cost-segment ${part.type}"
                     style="width:${((part.amount / total) * 100).toFixed(2)}%; --segment-index:${part.colorIndex}"
                     title="${part.label}: ${part.amount.toFixed(2)} EUR">
@@ -91,9 +93,8 @@ function renderCostChart(serverParts, domainYear, total){
             `).join("")}
         </div>
         <div class="cost-breakdown">
-            ${parts
-                .sort((a, b) => b.amount - a.amount)
-                .map((part, index) => `
+            ${sortedParts
+                .map(part => `
                     <div class="cost-row">
                         <span class="cost-dot ${part.type}" style="--segment-index:${part.colorIndex}"></span>
                         <span class="cost-label">${part.label}</span>