From 878bdaa5a7ffe0d0ca1635c2be8eadabdcb13944 Mon Sep 17 00:00:00 2001 From: michelia Date: Tue, 9 Jun 2026 10:16:29 +0800 Subject: [PATCH] fix(usage): keep the grouped-trend legend off the x-axis labels The legend renders at the chart bottom (bottom: 0); with the default grid (bottom: 8) it overlapped the date labels once a group-by split the trend into multiple series. Reserve grid bottom space (matching the Tokens trend) whenever a legend is shown. --- src/pages/usage/components/metric-chart-card.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/usage/components/metric-chart-card.tsx b/src/pages/usage/components/metric-chart-card.tsx index edc219d2..8790ae5f 100644 --- a/src/pages/usage/components/metric-chart-card.tsx +++ b/src/pages/usage/components/metric-chart-card.tsx @@ -133,12 +133,14 @@ const MetricChartCard: React.FC = ({ xAxisData={xAxisData} height={280} labelFormatter={labelFormatter} - // Auto-show a legend once the trend is split into multiple series. + // Auto-show a legend once the trend is split into multiple series, and + // reserve room below the x-axis so it doesn't overlap the date labels. legendData={ seriesData.length > 1 ? seriesData.map((s) => ({ name: s.name })) : undefined } + grid={seriesData.length > 1 ? { bottom: 28 } : undefined} /> );