Refine chart line colors and style

Author: JavaZeroo

src/components/ChartContainer.jsx

@@ -164,16 +164,16 @@ export default function ChartContainer({
     onMaxStepChange(maxStep);
   }, [parsedData, onMaxStepChange]);
 
-  // More distinct pastel-like colors for better readability
+  // Color-blind friendly palette for chart lines
   const colors = [
-    '#2563eb',
-    '#16a34a',
-    '#dc2626',
-    '#f59e0b',
-    '#7c3aed',
-    '#0e7490',
-    '#d946ef',
-    '#fb7185'
+    '#377eb8',
+    '#e41a1c',
+    '#4daf4a',
+    '#984ea3',
+    '#ff7f00',
+    '#ffff33',
+    '#a65628',
+    '#f781bf'
   ];
   const createChartData = dataArray => ({
     datasets: dataArray.map((item, index) => {
@@ -185,9 +185,11 @@ export default function ChartContainer({
         backgroundColor: `${color}33`,
         borderWidth: 2,
         fill: false,
-        tension: 0,
+        tension: 0.3,
+        cubicInterpolationMode: 'monotone',
+        borderDash: index % 2 ? [4, 3] : [],
         pointRadius: 0,
-        pointHoverRadius: 4,
+        pointHoverRadius: 5,
         pointBackgroundColor: color,
         pointBorderColor: color,
         pointBorderWidth: 1,
@@ -381,9 +383,10 @@ export default function ChartContainer({
         backgroundColor: '#dc2626',
         borderWidth: 2,
         fill: false,
-        tension: 0,
+        tension: 0.3,
+        cubicInterpolationMode: 'monotone',
         pointRadius: 0,
-        pointHoverRadius: 4,
+        pointHoverRadius: 5,
         pointBackgroundColor: '#dc2626',
         pointBorderColor: '#dc2626',
         pointBorderWidth: 1,
@@ -404,9 +407,10 @@ export default function ChartContainer({
         borderWidth: 2,
         borderDash: [5, 5],
         fill: false,
-        tension: 0,
+        tension: 0.3,
+        cubicInterpolationMode: 'monotone',
         pointRadius: 0,
-        pointHoverRadius: 4,
+        pointHoverRadius: 5,
         pointBackgroundColor: '#10b981',
         pointBorderColor: '#10b981',
         pointBorderWidth: 1,