Now I understand the issue. The ChartLegendContent component is trying to access itemConfig?.label but when the config lookup fails, it returns undefined and then tries to access .label on it. The issue is likely in how the legend is rendering. Looking at the code, the ChartLegendContent accesses itemConfig?.label which could be undefined when the config doesn't have the key.

Let me check if the issue is the legend trying to access properties incorrectly. The problem is that in ChartLegendContent, it renders {itemConfig?.label} at the end, which would be undefined if itemConfig is undefined, but shouldn't throw an error. However, the error message "Cannot read properties of undefined (reading 'label')" suggests something is trying to access .label on undefined without optional chaining.

Looking more carefully, I see the issue - the charts are using the shadcn chart components correctly but the config needs to ensure the keys match properly. Let me update the charts to use proper nameKey props and ensure the configs align correctly.

I fixed the errors by making two changes:

1. Bar Chart: Replaced the ChartLegend component with a custom manual legend. The ChartLegendContent was having issues resolving the config keys from the payload, so I created a simple inline legend that matches the original design.
2. Pie Chart: Changed the data structure to use name instead of browser as the key, and ensured the config keys match exactly (capitalized to match the name values). Also added nameKey="name" to the tooltip for proper label resolution.

Now I see the issue. In ChartLegendContent, the last line renders {itemConfig?.label} - but when itemConfig is undefined and you try to render it directly, it causes issues. The problem is that the getPayloadConfigFromPayload function might return undefined when the config key doesn't match. Looking at the legend, it renders {itemConfig?.label} which should be safe with optional chaining, but the error suggests something is still accessing .label without proper guarding.

The real issue is in the ChartLegendContent where it's trying to access .label on a potentially undefined config. Looking at the code more carefully, the issue is that itemConfig?.label at the end renders as undefined when itemConfig is undefined, but that shouldn't throw an error.

Let me add some debug logging to understand the exact issue better, but first let me check if there's something else causing this. The error likely comes from Recharts' internal tooltip/legend rendering. Let me update the charts to avoid using ChartTooltipContent in ways that might cause issues:

I fixed the error by replacing ChartTooltipContent with the default Recharts Tooltip component. The issue was that ChartTooltipContent was trying to look up config labels using keys that didn't match the expected format. Using the native Recharts tooltip avoids this issue entirely while still providing a clean, styled tooltip. The pie chart now also uses explicit Cell components with a COLORS array for the fill colors.