This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch fix-bignumber-trendline-stroke
in repository https://gitbox.apache.org/repos/asf/superset.git

commit f14114bc425b2fbb4a0a57e33aa3ac471c5ed9e0
Author: Amin Ghadersohi <[email protected]>
AuthorDate: Thu Feb 12 00:26:11 2026 +0000

    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 <[email protected]>
---
 .../BigNumber/BigNumberWithTrendline/transformProps.ts   | 16 ++++++++++++----
 .../test/BigNumber/transformProps.test.ts                |  8 ++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git 
a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
 
b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
index a1e11c63fea..032b36b0081 100644
--- 
a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
+++ 
b/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),
diff --git 
a/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts
 
b/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts
index 3c681f281b0..d43cf255feb 100644
--- 
a/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts
+++ 
b/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts
@@ -262,10 +262,10 @@ describe('BigNumberWithTrendline', () => {
     });
 
     expect(transformed.echartOptions?.grid).toEqual({
-      bottom: 0,
-      left: 0,
-      right: 0,
-      top: 0,
+      bottom: 1,
+      left: 1,
+      right: 1,
+      top: 1,
     });
   });
 

Reply via email to