src/components/simulator/Simulator.jsx

@@ -49,34 +49,25 @@ export default function Simulator() {
           return isNaN(num) ? 0 : num
         }),
 
-        backgroundColor: [
-          'rgba(255, 99, 132, 0.2)',
-          'rgba(54, 162, 235, 0.2)',
-          'rgba(255, 206, 86, 0.2)',
-          'rgba(75, 192, 192, 0.2)',
-          'rgba(153, 102, 255, 0.2)',
-          'rgba(255, 159, 64, 0.2)',
-          'rgba(0, 99, 132, 0.2)',
-          'rgba(0, 162, 235, 0.2)',
-          'rgba(0, 206, 86, 0.2)',
-          'rgba(0, 192, 192, 0.2)',
-          'rgba(0, 102, 255, 0.2)',
-          'rgba(0, 159, 64, 0.2)',
-        ],
-        borderColor: [
-          'rgba(255, 99, 132, 0.2)',
-          'rgba(54, 162, 235, 0.2)',
-          'rgba(255, 206, 86, 0.2)',
-          'rgba(75, 192, 192, 0.2)',
-          'rgba(153, 102, 255, 0.2)',
-          'rgba(255, 159, 64, 0.2)',
-          'rgba(0, 99, 132, 0.2)',
-          'rgba(0, 162, 235, 0.2)',
-          'rgba(0, 206, 86, 0.2)',
-          'rgba(0, 192, 192, 0.2)',
-          'rgba(0, 102, 255, 0.2)',
-          'rgba(0, 159, 64, 0.2)',
-        ],
+        backgroundColor: (context) => {
+          const chart = context.chart
+          const { ctx, chartArea } = chart
+
+          if (!chartArea) {
+            // This case happens on initial chart load
+            return null
+          }
+
+          const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top)
+          gradient.addColorStop(0, '#4FC3F7')  // Light blue at bottom
+          gradient.addColorStop(0.3, '#2FA8E0') // Original blue
+          gradient.addColorStop(0.7, '#1976D2') // Medium blue
+          gradient.addColorStop(1, '#0D47A1')   // Dark blue at top
+
+
+          return gradient
+        },
+        borderColor: '#2FA8E0' ,
         borderWidth: 1,
       },
     ],