Component | Stacked Bar: Add stacked spacing option

Author: dennisadriaans

packages/ts/src/components/stacked-bar/config.ts

@@ -5,6 +5,8 @@ import { ColorAccessor, StringAccessor } from 'types/accessor'
 import { Orientation } from 'types/position'
 
 export interface StackedBarConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
+  /** Spacing in pixels between stacked items in a single bar. Default: `0` */
+  stackSpacing?: number;
   /** Bar color accessor function. Default: `d => d.color` */
   color?: ColorAccessor<Datum>;
   /** Force set bar width in pixels. Default: `undefined` */
@@ -39,6 +41,7 @@ export const StackedBarDefaultConfig: StackedBarConfigInterface<unknown> = {
   dataStep: undefined,
   barPadding: 0.0,
   roundedCorners: 2,
+  stackSpacing: 0,
   cursor: null,
   barMinHeight1Px: false,
   barMinHeightZeroValue: null,

packages/ts/src/components/stacked-bar/index.ts

@@ -220,33 +220,50 @@ export class StackedBar<Datum> extends XYComponentCore<Datum, StackedBarConfigIn
     const x = -barWidth / 2
     const width = barWidth
 
+    // --- Spacing between stacked items ---
+    const stackSpacing = config.stackSpacing || 0
+    let hWithSpacing = h
+    let yWithSpacing = y
+    // Only apply spacing between inner segments (not at base or top)
+    const isInnerStack = accessorIndex > 0 && accessorIndex < this.getAccessors().length
+    if (!isEntering && stackSpacing > 0 && isInnerStack) {
+      if (this.isVertical()) {
+        hWithSpacing = Math.max(0, h - stackSpacing)
+        yWithSpacing = y + (isNegative ? -stackSpacing / 2 : stackSpacing / 2)
+      } else {
+        hWithSpacing = Math.max(0, h - stackSpacing)
+        yWithSpacing = y + (isNegative ? -stackSpacing / 2 : stackSpacing / 2)
+      }
+    }
+
     const cornerRadius = config.roundedCorners
       ? isNumber(config.roundedCorners) ? +config.roundedCorners : width / 2
       : 0
-    const cornerRadiusClamped = clamp(cornerRadius, 0, Math.min(height, width) / 2)
+    const cornerRadiusClamped = clamp(cornerRadius, 0, Math.min(hWithSpacing, width) / 2)
     const isNorthDirected = this.yScale.range()[0] > this.yScale.range()[1]
 
+    const allCornersRounded = stackSpacing > 0 && !!config.roundedCorners
     return roundedRectPath({
-      x: this.isVertical() ? x : y - h,
-      y: this.isVertical() ? y + (isNorthDirected ? 0 : -h) : x,
-      w: this.isVertical() ? width : h,
-      h: this.isVertical() ? h : width,
-      tl: isEnding && (this.isVertical()
+      x: this.isVertical() ? x : yWithSpacing - hWithSpacing,
+      y: this.isVertical() ? yWithSpacing + (isNorthDirected ? 0 : -hWithSpacing) : x,
+      w: this.isVertical() ? width : hWithSpacing,
+      h: this.isVertical() ? hWithSpacing : width,
+      tl: allCornersRounded || (isEnding && (this.isVertical()
         ? (!isNegative && isNorthDirected) || (isNegative && !isNorthDirected)
         : isNegative
-      ),
-      tr: isEnding && (this.isVertical()
+      )),
+      tr: allCornersRounded || (isEnding && (this.isVertical()
         ? (!isNegative && isNorthDirected) || (isNegative && !isNorthDirected)
         : !isNegative
-      ),
-      br: isEnding && (this.isVertical()
+      )),
+      br: allCornersRounded || (isEnding && (this.isVertical()
         ? (isNegative && isNorthDirected) || (!isNegative && !isNorthDirected)
         : !isNegative
-      ),
-      bl: isEnding && (this.isVertical()
+      )),
+      bl: allCornersRounded || (isEnding && (this.isVertical()
         ? (isNegative && isNorthDirected) || (!isNegative && !isNorthDirected)
         : isNegative
-      ),
+      )),
       r: cornerRadiusClamped,
     })
   }