"value", "count", and "Requests" to the chartConfig in secondary-charts.tsx. This ensures that even if recharts defaults to these keys for tooltips (especially in Scatter/Pie charts), the configuration lookup will succeed and not return undefined.Tooltip Safety:
hideLabel to the Pie Chart and Scatter Chart tooltips. These charts typically show individual data points where a general "header label" is redundant or error-prone to resolve.nameKey to the Pie Chart tooltip to ensure it looks up the correct segment name."value" to the main chart config as a fallback safeguard, ensuring consistent behavior across the dashboard.formatter to the Scatter chart tooltip to properly display latency values (e.g., "120 ms") instead of raw numbers, improving readability.Secondary Charts:
value and count keys to chartConfig to handle potential undefined lookups.hideLabel. Scatter points often trigger lookups for "x" or "y" coordinates as labels, which can fail if not explicitly defined. Hiding the header label is cleaner for this chart type.hideLabel and explicitly passed nameKey="name". This ensures the tooltip looks up the segment name (e.g., "500 Internal Error") in the config instead of failing on a generic label lookup.value key to chartConfig as a safeguard for consistent behavior across components.These changes directly address the Cannot read properties of undefined (reading 'label') error by ensuring all potential lookup keys exist or are skipped via hideLabel.
The error Cannot read properties of undefined (reading 'label') was caused by a mismatch between the lookup keys used by the chart components and the keys defined in chartConfig.
In shadcn/ui charts (built on Recharts), the ChartTooltipContent determines which config entry to use based on the following priority: nameKey → item.name → item.dataKey.
name="Avg Latency" (and similar props) on <Bar> and <Area> components. This forced the tooltip to look for a config key named "Avg Latency", which did not exist (the config key was "responseTime").name props from the chart components (Bar, Area, Line). Now, the components default to using their dataKey (e.g., "responseTime", "errorRate", "status200").dataKey, finds the entry (e.g., chartConfig.responseTime), and displays the correct label ("Avg Latency") and color defined in the configuration. This resolves the undefined lookup error.