fix(plugin-chart-echarts): prevent trendline stroke clipping at chart edges

The BigNumber with Trendline chart was clipping the line stroke at the
edges (especially X=0) because the ECharts grid had zero padding when
axes were hidden. The stroke extends beyond the data point by half its
width, so pixels at the boundary were truncated by the viewport.

Add half-strokeWidth padding to the grid on all sides when axes are
hidden, and explicitly set lineStyle.width so the padding stays in sync
with the actual stroke size.

Fixes #33454

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts

@@ -280,6 +280,11 @@ export default function transformProps(
       ? formatTime
       : numberFormatter;
 
+  const lineWidth = 2;
+  // Pad the grid by half the stroke width so the trendline isn't clipped at
+  // the edges of the chart area (the stroke extends beyond the data point).
+  const strokePad = lineWidth / 2;
+
   const echartOptions: EChartsCoreOption = trendLineData
     ? {
         series: [
@@ -291,6 +296,9 @@ export default function transformProps(
             symbolSize: 10,
             showSymbol: false,
             color: mainColor,
+            lineStyle: {
+              width: lineWidth,
+            },
             areaStyle: {
               color: new graphic.LinearGradient(0, 0, 0, 1, [
                 {
@@ -344,10 +352,10 @@ export default function transformProps(
                 top: TIMESERIES_CONSTANTS.gridOffsetTop,
               }
             : {
-                bottom: 0,
-                left: 0,
-                right: 0,
-                top: 0,
+                bottom: strokePad,
+                left: strokePad,
+                right: strokePad,
+                top: strokePad,
               },
         tooltip: {
           ...getDefaultTooltip(refs),

superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts

@@ -261,11 +261,15 @@ describe('BigNumberWithTrendline', () => {
       },
     });
 
+    const series = (transformed.echartOptions?.series as any)?.[0];
+    expect(series?.lineStyle?.width).toBe(2);
+
+    const expectedPad = series.lineStyle.width / 2;
     expect(transformed.echartOptions?.grid).toEqual({
-      bottom: 0,
-      left: 0,
-      right: 0,
-      top: 0,
+      bottom: expectedPad,
+      left: expectedPad,
+      right: expectedPad,
+      top: expectedPad,
     });
   });