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

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

@@ -282,6 +282,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: [
@@ -293,6 +298,9 @@ export default function transformProps(
             symbolSize: 10,
             showSymbol: false,
             color: mainColor ?? BRAND_COLOR,
+            lineStyle: {
+              width: lineWidth,
+            },
             areaStyle: {
               color: new graphic.LinearGradient(0, 0, 0, 1, [
                 {
@@ -346,10 +354,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

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { DatasourceType, TimeGranularity, VizType } from '@superset-ui/core';
+import type { LineSeriesOption } from 'echarts';
 import { supersetTheme } from '@apache-superset/core/theme';
 import transformProps from '../../src/BigNumber/BigNumberWithTrendline/transformProps';
 import {
@@ -269,11 +270,18 @@ describe('BigNumberWithTrendline', () => {
       },
     });
 
+    const series = (
+      transformed.echartOptions?.series as LineSeriesOption[]
+    )?.[0];
+    const lineWidth = series?.lineStyle?.width;
+    expect(lineWidth).toBe(2);
+
+    const expectedPad = (lineWidth as number) / 2;
     expect(transformed.echartOptions?.grid).toEqual({
-      bottom: 0,
-      left: 0,
-      right: 0,
-      top: 0,
+      bottom: expectedPad,
+      left: expectedPad,
+      right: expectedPad,
+      top: expectedPad,
     });
   });