src/components/simulator/Simulator.jsx

@@ -49,25 +49,34 @@ export default function Simulator() {
           return isNaN(num) ? 0 : num
         }),
 
-        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' ,
+        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)',
+        ],
         borderWidth: 1,
       },
     ],