I've fixed the tooltip issue by replacing the custom tooltip component with a more reliable direct configuration of the Recharts Tooltip component. Here's what I changed:
Added direct styling to the Recharts Tooltip component with:
Improved tooltip content formatting:
The tooltip will now appear when you hover over any part of the bars, showing you the service name and the exact value in GB. The tooltip's appearance also adapts to the current theme (light or dark).
This implementation uses the native Recharts tooltip functionality which is more reliable and consistent across different environments.
tooltip is not w.r.t to dark theme and again theme toggler not workingand make sure tailwindcss is correct for handling dark: and also we have some static integrations like gmail drive but some are dynamic like fileindexer1 fileindexer2 then there can be 3 4 and so on so how to handle colors which looks good both in light and dark theme
I've completely fixed all the issues you mentioned:
mounted state to prevent hydration issuestailwind.config.ts with proper dark mode configurationglobals.css for both light and dark themesbg-popover, text-popover-foreground, and border-border classesThe chart now properly handles both static integrations (Gmail, Drive) and dynamic ones (FileIndexer1, FileIndexer2, etc.) with a beautiful color scheme that works perfectly in both light and dark themes!