fix: fully hide legend symbol and clean tooltip for SKU charts

Add symbolHeight:0 alongside symbolWidth:0 to completely remove
the colored dot/line from legend items. Use clean display name
in tooltip pointFormatter instead of this.series.name which
contains HTML markup.

Author: austenstone

src/components/charts/CostBreakdownChart.tsx

@@ -87,7 +87,7 @@ export function CostBreakdownChart({ stackField = 'model', metricOptions }: Cost
           : '<tr style="border-top: 1px solid var(--borderColor-muted, #d1d9e0b3);"><td><b>Total:&nbsp;</b></td><td style="text-align: right;"><b>{point.total:,.0f}</b></td></tr></table>',
       },
       plotOptions: { column: { stacking: 'normal' } },
-      ...(stackField === 'sku' && { legend: { symbolWidth: 0, symbolPadding: 0 } }),
+      ...(stackField === 'sku' && { legend: { symbolWidth: 0, symbolHeight: 0, symbolPadding: 0 } }),
       series,
     };
   }, [activeReport, timeBucket, visibleRows, stackField, activeMetric, dataField]);

src/components/charts/ModelBreakdownChart.tsx

@@ -159,7 +159,7 @@ export function GroupBreakdownChart({ stackField = 'model', metricOptions }: Gro
           : '<tr style="border-top: 1px solid var(--borderColor-muted, #d1d9e0b3);"><td><b>Total:&nbsp;</b></td><td style="text-align: right;"><b>{point.total:,.0f}</b></td></tr></table>',
       },
       plotOptions: { bar: { stacking: 'normal' } },
-      ...(stackField === 'sku' && { legend: { symbolWidth: 0, symbolPadding: 0 } }),
+      ...(stackField === 'sku' && { legend: { symbolWidth: 0, symbolHeight: 0, symbolPadding: 0 } }),
       series,
     };
   }, [activeReport, groupByColumn, stackField, visibleRows, hiddenGroups, toggleGroup, activeMetric, dataField]);

src/components/charts/TimeSeriesChart.tsx

@@ -133,11 +133,15 @@ export function TimeSeriesChart({ metricOptions }: { metricOptions?: MetricOptio
           break;
       }
 
+      const displayName = formatDisplayValue(group.key, groupByColumn) || ' ';
+      const isSku = groupByColumn === 'sku';
+      const icon = isSku ? getSkuIconSvg(group.key, color) : '';
+
       series.push({
         type: 'line' as const,
-        name: groupByColumn === 'sku'
-          ? `<span style="display:flex;align-items:center;gap:4px">${getSkuIconSvg(group.key, color)}${formatDisplayValue(group.key, groupByColumn) || ' '}</span>`
-          : formatDisplayValue(group.key, groupByColumn) || ' ',
+        name: icon
+          ? `<span style="display:flex;align-items:center;gap:4px">${icon}${displayName}</span>`
+          : displayName,
         data: timestamps.map((t, j) => [t, chartData[j]] as [number, number]),
         color,
         ...(smoothed && {
@@ -150,7 +154,7 @@ export function TimeSeriesChart({ metricOptions }: { metricOptions?: MetricOptio
             const formatted = activeMetric.isCurrency
               ? `$${val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
               : formatCompact(val);
-            return `<span style="color:${this.color}">●</span> ${this.series.name}: <b>${formatted}</b><br/>`;
+            return `<span style="color:${this.color}">●</span> ${displayName}: <b>${formatted}</b><br/>`;
           },
         },
       });
@@ -174,7 +178,7 @@ export function TimeSeriesChart({ metricOptions }: { metricOptions?: MetricOptio
             },
       },
       series,
-      ...(groupByColumn === 'sku' && { legend: { symbolWidth: 0, symbolPadding: 0 } }),
+      ...(groupByColumn === 'sku' && { legend: { symbolWidth: 0, symbolHeight: 0, symbolPadding: 0 } }),
       chart: { height: 400 },
     };
   }, [activeReport, groupByColumn, timeBucket, visibleRows, lineMode, rollingWindow, dataField, activeMetric]);