Vinay K Graph Hover

src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx

@@ -48,6 +48,9 @@
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
 
+  // ✅ NEW: key to force Recharts remount when needed (fixes "renders only on hover")
+  const [chartKey, setChartKey] = useState(0);
+
   useEffect(() => {
     dispatch(fetchSeverities());
     dispatch(fetchInjuryTypes());
@@ -141,6 +144,30 @@
     '#38BDF8', // cyan
   ];
 
+  // Force a resize/reflow after data/filter changes so chart draws immediately (no hover needed)
+  useEffect(() => {
+    // Only do this once the chart is supposed to be visible
+    if (loading || error) return;
+
+    const raf = requestAnimationFrame(() => {
+      window.dispatchEvent(new Event('resize')); // triggers ResponsiveContainer measure
+      setChartKey(k => k + 1); // extra-safe: forces a clean remount
+    });
+
+    return () => cancelAnimationFrame(raf);
+  }, [
+    loading,
+    error,
+    darkMode,
+    chartData.length,
+    seriesProjectIds.length,
+    projectNameFilter,
+    severityFilter,
+    injuryTypeFilter,
+    startDate,
+    endDate,
+  ]);
+
   const selectStyles = darkMode && {
     control: base => ({
       ...base,
@@ -265,7 +292,7 @@
       {!loading && error && <p className="error">Error: {String(error)}</p>}
 
       {!loading && !error && chartData.length > 0 && (
-        <ResponsiveContainer width="100%" height={420}>
+        <ResponsiveContainer key={chartKey} width="100%" height={420}>
           <BarChart
             data={chartData}
             margin={{ top: 16, right: 24, bottom: 8, left: 8 }}
@@ -292,6 +319,8 @@
               tickLine={{ stroke: darkMode ? '#888' : '#000' }}
             />
             <Tooltip
+              //tooltip only; no shaded hover overlay across the chart
+              cursor={false}
               contentStyle={{
                 backgroundColor: darkMode ? '#2b3e59' : '#fff',
                 border: `1px solid ${darkMode ? '#4a5568' : '#cccccc'}`,