diff --git a/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx index db52e8def1..6424d238e1 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx +++ b/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx @@ -48,6 +48,9 @@ function InjuryCategoryBarChart() { 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 @@ function InjuryCategoryBarChart() { '#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 @@ function InjuryCategoryBarChart() { {!loading && error &&

Error: {String(error)}

} {!loading && !error && chartData.length > 0 && ( - +