src/components/simulator/Simulator.jsx

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