Improve graph data point display

pvc-vue/src/components/ClusterOverview.vue

@@ -172,8 +172,6 @@ const getDeltaClass = (delta) => {
 };
 
 const healthChartData = computed(() => {
-  const health = props.clusterData.cluster_health?.health || 0;
-  
   return {
     labels: props.metricsHistory.labels,
     datasets: [{
@@ -195,13 +193,17 @@ const healthChartData = computed(() => {
       },
       borderWidth: 1.5,
       tension: 0.4,
-      pointRadius: 2,
-      pointBackgroundColor: (ctx) => {
-        const value = ctx.parsed.y;
-        if (value > 90) return 'rgba(40, 167, 69, 0.2)';  // Green
-        if (value > 50) return 'rgba(255, 193, 7, 0.2)';  // Yellow
-        return 'rgba(220, 53, 69, 0.2)';                  // Red
-      }
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',  // Light background for all points
+      pointBorderColor: (ctx) => {
+        if (!ctx.raw) return 'rgba(0, 0, 0, 0.2)';
+        const value = ctx.raw;
+        if (value > 90) return 'rgba(40, 167, 69, 0.5)';  // Green
+        if (value > 50) return 'rgba(255, 193, 7, 0.5)';  // Yellow
+        return 'rgba(220, 53, 69, 0.5)';                  // Red
+      },
+      pointBorderWidth: 1.5
     }]
   };
 });

pvc-vue/src/components/MetricsCharts.vue

@@ -117,7 +117,8 @@ const chartOptions = {
       tension: 0.2
     },
     point: {
-      radius: 2
+      radius: 0,
+      hoverRadius: 4
     }
   },
   plugins: {