From 541440be8a568a4a299f24923e373bbcf4fa183d Mon Sep 17 00:00:00 2001
From: hailin <hailin.zhao@gdzx.xyz>
Date: Sun, 5 Apr 2026 03:09:29 -0700
Subject: [PATCH] fix: title and legend auto-avoid overlap

Legend moves below title when both are at top. Grid top adjusts
dynamically based on title/legend presence to prevent overlap.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../EChartsOptionBuilder/barOptionBuilder.ts  | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/adapters/gateways/EChartsOptionBuilder/barOptionBuilder.ts b/frontend/src/adapters/gateways/EChartsOptionBuilder/barOptionBuilder.ts
index 01cfd0e..a559f00 100644
--- a/frontend/src/adapters/gateways/EChartsOptionBuilder/barOptionBuilder.ts
+++ b/frontend/src/adapters/gateways/EChartsOptionBuilder/barOptionBuilder.ts
@@ -20,10 +20,21 @@ function applyCommonStyle(option: Record<string, any>, style: StyleConfig): void
   }
 
   if (style.legend.visible) {
+    // When title is visible and legend is at top, push legend below the title
+    const hasTitle = style.title.visible && style.title.text;
+    let legendTop: string | number = 'top';
+    if (style.legend.position === 'top') {
+      legendTop = hasTitle ? 35 : 'top';
+    } else if (style.legend.position === 'bottom') {
+      legendTop = 'bottom';
+    } else {
+      legendTop = 'middle';
+    }
+
     option.legend = {
       show: true,
       orient: style.legend.orient,
-      top: style.legend.position === 'top' ? 'top' : style.legend.position === 'bottom' ? 'bottom' : 'middle',
+      top: legendTop,
       left: style.legend.position === 'left' ? 'left' : style.legend.position === 'right' ? 'right' : 'center',
       textStyle: {
         fontSize: style.legend.fontSize,
@@ -51,9 +62,16 @@ function applyCommonStyle(option: Record<string, any>, style: StyleConfig): void
     option.animation = false;
   }
 
+  // Dynamic grid top: title(30) + legend(25) + padding
+  const hasTitle = style.title.visible && style.title.text;
+  const hasLegend = style.legend.visible && style.legend.position === 'top';
+  let gridTop = 20;
+  if (hasTitle) gridTop += 30;
+  if (hasLegend) gridTop += 25;
+
   option.grid = {
     containLabel: true,
-    top: 60,
+    top: gridTop,
     right: 30,
     bottom: 30,
     left: 30,