@internetstiftelsen/charts 0.9.2 → 0.10.0

package/dist/bar.js

@@ -4,7 +4,6 @@ const LABEL_INSET_DEFAULT = 4;
 const LABEL_INSET_STACKED = 6;
 const LABEL_MIN_PADDING_DEFAULT = 8;
 const LABEL_MIN_PADDING_STACKED = 16;
-const LAYER_LABEL_GAP = 6;
 function getLabelSpacing(mode) {
     const stacked = mode !== 'none';
     return {
@@ -14,6 +13,93 @@ function getLabelSpacing(mode) {
             : LABEL_MIN_PADDING_DEFAULT,
     };
 }
+function getBarSlotLayout(bandwidth, mode, maxBarSize, totalSeries, seriesIndex, gap) {
+    if (mode === 'none') {
+        const groupSize = maxBarSize
+            ? Math.min(bandwidth, maxBarSize * totalSeries)
+            : bandwidth;
+        const totalGapSpace = groupSize * gap * (totalSeries - 1);
+        const availableSize = groupSize - totalGapSpace;
+        const thickness = availableSize / totalSeries;
+        const gapSize = totalSeries > 1 ? groupSize * gap : 0;
+        return {
+            thickness,
+            offset: (bandwidth - groupSize) / 2 +
+                seriesIndex * (thickness + gapSize),
+        };
+    }
+    if (mode === 'layer') {
+        const maxSize = maxBarSize
+            ? Math.min(bandwidth, maxBarSize)
+            : bandwidth;
+        const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
+        const thickness = maxSize * scaleFactor;
+        return {
+            thickness,
+            offset: (bandwidth - thickness) / 2,
+        };
+    }
+    const thickness = maxBarSize ? Math.min(bandwidth, maxBarSize) : bandwidth;
+    return {
+        thickness,
+        offset: (bandwidth - thickness) / 2,
+    };
+}
+function getBarValueRange(categoryKey, value, stackingContext) {
+    const mode = stackingContext?.mode ?? 'normal';
+    if (mode === 'none' || mode === 'layer') {
+        return {
+            start: 0,
+            end: value,
+        };
+    }
+    if (mode === 'percent') {
+        if (value >= 0) {
+            const cumulative = stackingContext?.positiveCumulativeData.get(categoryKey) ?? 0;
+            const total = stackingContext?.positiveTotalData.get(categoryKey) ?? 0;
+            if (total === 0) {
+                return { start: 0, end: 0 };
+            }
+            return {
+                start: (cumulative / total) * 100,
+                end: ((cumulative + value) / total) * 100,
+            };
+        }
+        const cumulativeMagnitude = stackingContext?.negativeCumulativeData.get(categoryKey) ?? 0;
+        const totalMagnitude = stackingContext?.negativeTotalData.get(categoryKey) ?? 0;
+        if (totalMagnitude === 0) {
+            return { start: 0, end: 0 };
+        }
+        return {
+            start: -((cumulativeMagnitude / totalMagnitude) * 100),
+            end: -(((cumulativeMagnitude + Math.abs(value)) / totalMagnitude) *
+                100),
+        };
+    }
+    if (value >= 0) {
+        const cumulative = stackingContext?.positiveCumulativeData.get(categoryKey) ?? 0;
+        return {
+            start: cumulative,
+            end: cumulative + value,
+        };
+    }
+    const cumulativeMagnitude = stackingContext?.negativeCumulativeData.get(categoryKey) ?? 0;
+    const start = -cumulativeMagnitude;
+    return {
+        start,
+        end: start + value,
+    };
+}
+function getScaledValueRange(scale, startValue, endValue) {
+    const start = scale(startValue) ?? 0;
+    const end = scale(endValue) ?? 0;
+    return {
+        start,
+        end,
+        min: Math.min(start, end),
+        max: Math.max(start, end),
+    };
+}
 export class Bar {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -46,6 +132,12 @@ export class Bar {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "side", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "valueLabel", {
             enumerable: true,
             configurable: true,
@@ -62,6 +154,7 @@ export class Bar {
         this.fill = config.fill || '#8884d8';
         this.colorAdapter = config.colorAdapter;
         this.maxBarSize = config.maxBarSize;
+        this.side = config.side ?? 'right';
         this.valueLabel = config.valueLabel;
         this.exportHooks = config.exportHooks;
     }
@@ -71,6 +164,7 @@ export class Bar {
             fill: this.fill,
             colorAdapter: this.colorAdapter,
             maxBarSize: this.maxBarSize,
+            side: this.side,
             valueLabel: this.valueLabel,
         };
     }
@@ -81,6 +175,12 @@ export class Bar {
             exportHooks: this.exportHooks,
         });
     }
+    getRenderedValue(value, orientation = 'vertical') {
+        if (orientation === 'horizontal' && this.side === 'left') {
+            return -Math.abs(value);
+        }
+        return value;
+    }
     render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme, stackingContext, orientation = 'vertical') {
         if (orientation === 'vertical') {
             this.renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext);
@@ -101,49 +201,13 @@ export class Bar {
     renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext) {
         const bandwidth = x.bandwidth ? x.bandwidth() : 20;
         const mode = stackingContext?.mode ?? 'normal';
-        // Calculate bar width based on stacking mode
-        let barWidth;
-        let barOffset;
-        if (mode === 'none') {
-            // Grouped bars: divide bandwidth among series with gap
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const gap = stackingContext?.gap ?? 0.1;
-            const groupWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
-                : bandwidth;
-            // Calculate total gap space and individual bar width
-            const totalGapSpace = groupWidth * gap * (totalSeries - 1);
-            const availableWidth = groupWidth - totalGapSpace;
-            barWidth = availableWidth / totalSeries;
-            const gapSize = totalSeries > 1 ? groupWidth * gap : 0;
-            barOffset =
-                (bandwidth - groupWidth) / 2 +
-                    seriesIndex * (barWidth + gapSize);
-        }
-        else if (mode === 'layer') {
-            // Layer mode: each subsequent series has smaller bars
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const maxWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            // Scale from 100% to a minimum (e.g., 30%) based on series position
-            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
-            barWidth = maxWidth * scaleFactor;
-            barOffset = (bandwidth - barWidth) / 2;
-        }
-        else {
-            // Normal and Percent modes: full width stacked bars
-            barWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            barOffset = (bandwidth - barWidth) / 2;
-        }
-        // Get the baseline value from the Y scale's domain
-        const yDomain = y.domain();
-        const baselineValue = yDomain[0] >= 0 ? Math.max(0, yDomain[0]) : yDomain[0];
-        const yBaseline = y(baselineValue) || 0;
+        const { thickness: barWidth, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
+        const getVerticalBounds = (d) => {
+            const categoryKey = String(d[xKey]);
+            const value = this.getRenderedValue(parseValue(d[this.dataKey]), 'vertical');
+            const { start, end } = getBarValueRange(categoryKey, value, stackingContext);
+            return getScaledValueRange(y, start, end);
+        };
         // Add bar rectangles
         const sanitizedKey = sanitizeForCSS(this.dataKey);
         plotGroup
@@ -158,96 +222,24 @@ export class Bar {
                 ? xPos + barOffset
                 : xPos - barWidth / 2;
         })
-            .attr('y', (d) => {
-            const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            if (mode === 'none' || mode === 'layer') {
-                // No stacking - each bar starts from baseline
-                const yPos = y(value) || 0;
-                return Math.min(yBaseline, yPos);
-            }
-            else if (mode === 'percent') {
-                // Percent mode: calculate position based on cumulative percentage
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentCumulative = (cumulative / total) * 100;
-                const percentValue = (value / total) * 100;
-                return y(percentCumulative + percentValue) || 0;
-            }
-            else {
-                // Normal stacking mode
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                return y(cumulative + value) || 0;
-            }
-        })
+            .attr('y', (d) => getVerticalBounds(d).min)
             .attr('width', barWidth)
             .attr('height', (d) => {
-            const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            if (mode === 'none' || mode === 'layer') {
-                const yPos = y(value) || 0;
-                return Math.abs(yBaseline - yPos);
-            }
-            else if (mode === 'percent') {
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentValue = (value / total) * 100;
-                const yTop = y(percentValue) || 0;
-                const yBottom = y(0) || 0;
-                return Math.abs(yBottom - yTop);
-            }
-            else {
-                // Normal stacking mode
-                const yTop = y(value) || 0;
-                return Math.abs(yBaseline - yTop);
-            }
+            const bounds = getVerticalBounds(d);
+            return Math.abs(bounds.max - bounds.min);
         })
             .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
     }
     renderHorizontal(plotGroup, data, xKey, x, y, parseValue, yScaleType, stackingContext) {
         const bandwidth = y.bandwidth ? y.bandwidth() : 20;
         const mode = stackingContext?.mode ?? 'normal';
-        // Calculate bar height based on stacking mode
-        let barHeight;
-        let barOffset;
-        if (mode === 'none') {
-            // Grouped bars: divide bandwidth among series with gap
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const gap = stackingContext?.gap ?? 0.1;
-            const groupHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
-                : bandwidth;
-            // Calculate total gap space and individual bar height
-            const totalGapSpace = groupHeight * gap * (totalSeries - 1);
-            const availableHeight = groupHeight - totalGapSpace;
-            barHeight = availableHeight / totalSeries;
-            const gapSize = totalSeries > 1 ? groupHeight * gap : 0;
-            barOffset =
-                (bandwidth - groupHeight) / 2 +
-                    seriesIndex * (barHeight + gapSize);
-        }
-        else if (mode === 'layer') {
-            // Layer mode: each subsequent series has smaller bars
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const maxHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
-            barHeight = maxHeight * scaleFactor;
-            barOffset = (bandwidth - barHeight) / 2;
-        }
-        else {
-            // Normal and Percent modes: full height stacked bars
-            barHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            barOffset = (bandwidth - barHeight) / 2;
-        }
-        // Get the baseline value from the scale's domain
-        const domain = x.domain();
-        const baselineValue = domain[0] >= 0 ? Math.max(0, domain[0]) : domain[0];
-        const xBaseline = x(baselineValue) || 0;
+        const { thickness: barHeight, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
+        const getHorizontalBounds = (d) => {
+            const categoryKey = String(d[xKey]);
+            const value = this.getRenderedValue(parseValue(d[this.dataKey]), 'horizontal');
+            const { start, end } = getBarValueRange(categoryKey, value, stackingContext);
+            return getScaledValueRange(x, start, end);
+        };
         // Add bar rectangles (horizontal)
         const sanitizedKey = sanitizeForCSS(this.dataKey);
         plotGroup
@@ -256,25 +248,7 @@ export class Bar {
             .join('rect')
             .attr('class', `bar-${sanitizedKey}`)
             .attr('data-index', (_, i) => i)
-            .attr('x', (d) => {
-            const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            if (mode === 'none' || mode === 'layer') {
-                const xPos = x(value) || 0;
-                return Math.min(xBaseline, xPos);
-            }
-            else if (mode === 'percent') {
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentCumulative = (cumulative / total) * 100;
-                return x(percentCumulative) || 0;
-            }
-            else {
-                // Normal stacking mode
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                return x(cumulative) || 0;
-            }
-        })
+            .attr('x', (d) => getHorizontalBounds(d).min)
             .attr('y', (d) => {
             const yPos = getScalePosition(y, d[xKey], yScaleType);
             return yScaleType === 'band'
@@ -282,25 +256,8 @@ export class Bar {
                 : yPos - barHeight / 2;
         })
             .attr('width', (d) => {
-            const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            if (mode === 'none' || mode === 'layer') {
-                const xPos = x(value) || 0;
-                return Math.abs(xPos - xBaseline);
-            }
-            else if (mode === 'percent') {
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentValue = (value / total) * 100;
-                const xLeft = x(0) || 0;
-                const xRight = x(percentValue) || 0;
-                return Math.abs(xRight - xLeft);
-            }
-            else {
-                // Normal stacking mode
-                const xLeft = x(0) || 0;
-                const xRight = x(value) || 0;
-                return Math.abs(xRight - xLeft);
-            }
+            const bounds = getHorizontalBounds(d);
+            return Math.abs(bounds.max - bounds.min);
         })
             .attr('height', barHeight)
             .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
@@ -308,43 +265,7 @@ export class Bar {
     renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme, stackingContext) {
         const bandwidth = x.bandwidth ? x.bandwidth() : 20;
         const mode = stackingContext?.mode ?? 'normal';
-        // Calculate bar width based on stacking mode (same logic as renderVertical)
-        let barWidth;
-        let barOffset;
-        if (mode === 'none') {
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const gap = stackingContext?.gap ?? 0.1;
-            const groupWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
-                : bandwidth;
-            const totalGapSpace = groupWidth * gap * (totalSeries - 1);
-            const availableWidth = groupWidth - totalGapSpace;
-            barWidth = availableWidth / totalSeries;
-            const gapSize = totalSeries > 1 ? groupWidth * gap : 0;
-            barOffset =
-                (bandwidth - groupWidth) / 2 +
-                    seriesIndex * (barWidth + gapSize);
-        }
-        else if (mode === 'layer') {
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const maxWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
-            barWidth = maxWidth * scaleFactor;
-            barOffset = (bandwidth - barWidth) / 2;
-        }
-        else {
-            barWidth = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            barOffset = (bandwidth - barWidth) / 2;
-        }
-        const yDomain = y.domain();
-        const baselineValue = yDomain[0] >= 0 ? Math.max(0, yDomain[0]) : yDomain[0];
-        const yBaseline = y(baselineValue) || 0;
+        const { thickness: barWidth, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
         const config = this.valueLabel;
         const position = config.position || 'outside';
         const insidePosition = config.insidePosition || 'top';
@@ -361,33 +282,18 @@ export class Bar {
             .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
         data.forEach((d, i) => {
             const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            const valueText = String(value);
+            const rawValue = parseValue(d[this.dataKey]);
+            const renderedValue = this.getRenderedValue(rawValue, 'vertical');
+            const valueText = String(rawValue);
             const xPos = getScalePosition(x, d[xKey], xScaleType);
             const barColor = this.colorAdapter
                 ? this.colorAdapter(d, i)
                 : this.fill;
-            // Calculate bar position based on stacking mode
-            let barTop;
-            let barBottom;
-            if (mode === 'none' || mode === 'layer') {
-                const yPos = y(value) || 0;
-                barTop = Math.min(yBaseline, yPos);
-                barBottom = Math.max(yBaseline, yPos);
-            }
-            else if (mode === 'percent') {
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentCumulative = (cumulative / total) * 100;
-                const percentValue = (value / total) * 100;
-                barTop = y(percentCumulative + percentValue) || 0;
-                barBottom = y(percentCumulative) || 0;
-            }
-            else {
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                barTop = y(cumulative + value) || 0;
-                barBottom = y(cumulative) || 0;
-            }
+            const { start, end } = getBarValueRange(categoryKey, renderedValue, stackingContext);
+            const bounds = getScaledValueRange(y, start, end);
+            const barTop = bounds.min;
+            const barBottom = bounds.max;
+            const isNegative = renderedValue < 0;
             const barHeight = Math.abs(barBottom - barTop);
             const barCenterX = xPos +
                 (xScaleType === 'band' ? barOffset : -barWidth / 2) +
@@ -406,11 +312,13 @@ export class Bar {
             let labelY = (barTop + barBottom) / 2; // Default to middle
             let shouldRender = true;
             if (position === 'outside') {
-                // Place above the bar
-                labelY = barTop - boxHeight / 2 - 4;
-                // Check if it fits (not going above plot area)
                 const plotTop = y.range()[1];
-                if (labelY - boxHeight / 2 < plotTop) {
+                const plotBottom = y.range()[0];
+                labelY = isNegative
+                    ? barBottom + boxHeight / 2 + 4
+                    : barTop - boxHeight / 2 - 4;
+                if ((!isNegative && labelY - boxHeight / 2 < plotTop) ||
+                    (isNegative && labelY + boxHeight / 2 > plotBottom)) {
                     shouldRender = false;
                 }
             }
@@ -432,25 +340,9 @@ export class Bar {
                             labelY = barBottom - boxHeight / 2 - inset;
                             break;
                     }
-                    // Check if it fits inside the bar
                     if (boxHeight + minPadding > barHeight) {
                         shouldRender = false;
                     }
-                    // In layer mode, check the label fits in the visible gap
-                    // above the next layer's bar top
-                    if (shouldRender &&
-                        mode === 'layer' &&
-                        insidePosition === 'top' &&
-                        stackingContext?.nextLayerData) {
-                        const nextValue = stackingContext.nextLayerData.get(categoryKey);
-                        if (nextValue !== undefined) {
-                            const nextBarTop = y(nextValue) || 0;
-                            const labelBottom = labelY + boxHeight / 2;
-                            if (labelBottom + LAYER_LABEL_GAP > nextBarTop) {
-                                shouldRender = false;
-                            }
-                        }
-                    }
                 }
             }
             tempText.remove();
@@ -492,43 +384,7 @@ export class Bar {
     renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, yScaleType, theme, stackingContext) {
         const bandwidth = y.bandwidth ? y.bandwidth() : 20;
         const mode = stackingContext?.mode ?? 'normal';
-        // Calculate bar height based on stacking mode (same logic as renderHorizontal)
-        let barHeight;
-        let barOffset;
-        if (mode === 'none') {
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const gap = stackingContext?.gap ?? 0.1;
-            const groupHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
-                : bandwidth;
-            const totalGapSpace = groupHeight * gap * (totalSeries - 1);
-            const availableHeight = groupHeight - totalGapSpace;
-            barHeight = availableHeight / totalSeries;
-            const gapSize = totalSeries > 1 ? groupHeight * gap : 0;
-            barOffset =
-                (bandwidth - groupHeight) / 2 +
-                    seriesIndex * (barHeight + gapSize);
-        }
-        else if (mode === 'layer') {
-            const totalSeries = stackingContext?.totalSeries ?? 1;
-            const seriesIndex = stackingContext?.seriesIndex ?? 0;
-            const maxHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
-            barHeight = maxHeight * scaleFactor;
-            barOffset = (bandwidth - barHeight) / 2;
-        }
-        else {
-            barHeight = this.maxBarSize
-                ? Math.min(bandwidth, this.maxBarSize)
-                : bandwidth;
-            barOffset = (bandwidth - barHeight) / 2;
-        }
-        const domain = x.domain();
-        const baselineValue = domain[0] >= 0 ? Math.max(0, domain[0]) : domain[0];
-        const xBaseline = x(baselineValue) || 0;
+        const { thickness: barHeight, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
         const config = this.valueLabel;
         const position = config.position || 'outside';
         const insidePosition = config.insidePosition || 'top';
@@ -545,33 +401,18 @@ export class Bar {
             .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
         data.forEach((d, i) => {
             const categoryKey = String(d[xKey]);
-            const value = parseValue(d[this.dataKey]);
-            const valueText = String(value);
+            const rawValue = parseValue(d[this.dataKey]);
+            const renderedValue = this.getRenderedValue(rawValue, 'horizontal');
+            const valueText = String(rawValue);
             const yPos = getScalePosition(y, d[xKey], yScaleType);
             const barColor = this.colorAdapter
                 ? this.colorAdapter(d, i)
                 : this.fill;
-            // Calculate bar position based on stacking mode
-            let barLeft;
-            let barRight;
-            if (mode === 'none' || mode === 'layer') {
-                const xPos = x(value) || 0;
-                barLeft = Math.min(xBaseline, xPos);
-                barRight = Math.max(xBaseline, xPos);
-            }
-            else if (mode === 'percent') {
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
-                const percentCumulative = (cumulative / total) * 100;
-                const percentValue = (value / total) * 100;
-                barLeft = x(percentCumulative) || 0;
-                barRight = x(percentCumulative + percentValue) || 0;
-            }
-            else {
-                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
-                barLeft = x(cumulative) || 0;
-                barRight = x(cumulative + value) || 0;
-            }
+            const { start, end } = getBarValueRange(categoryKey, renderedValue, stackingContext);
+            const bounds = getScaledValueRange(x, start, end);
+            const barLeft = bounds.min;
+            const barRight = bounds.max;
+            const isNegative = renderedValue < 0;
             const barWidth = Math.abs(barRight - barLeft);
             const barCenterY = yPos +
                 (yScaleType === 'band' ? barOffset : -barHeight / 2) +
@@ -590,16 +431,17 @@ export class Bar {
             const labelY = barCenterY;
             let shouldRender = true;
             if (position === 'outside') {
-                // Place to the right of the bar
-                labelX = barRight + boxWidth / 2 + 4;
-                // Check if it fits (not going beyond plot area)
-                const plotRight = x.range()[1];
-                if (labelX + boxWidth / 2 > plotRight) {
+                const plotLeft = Math.min(...x.range());
+                const plotRight = Math.max(...x.range());
+                labelX = isNegative
+                    ? barLeft - boxWidth / 2 - 4
+                    : barRight + boxWidth / 2 + 4;
+                if ((!isNegative && labelX + boxWidth / 2 > plotRight) ||
+                    (isNegative && labelX - boxWidth / 2 < plotLeft)) {
                     shouldRender = false;
                 }
             }
             else {
-                // Map top/middle/bottom to start/middle/end for horizontal
                 if (mode === 'layer' && insidePosition === 'bottom') {
                     // Bottom labels in layer mode are visually ambiguous and often hidden by overlap.
                     shouldRender = false;
@@ -607,33 +449,31 @@ export class Bar {
                 else {
                     const { inset, minPadding } = getLabelSpacing(mode);
                     switch (insidePosition) {
-                        case 'top': // start of bar (left side)
-                            labelX = barLeft + boxWidth / 2 + inset;
+                        case 'top':
+                            labelX = isNegative
+                                ? barRight - boxWidth / 2 - inset
+                                : barLeft + boxWidth / 2 + inset;
                             break;
                         case 'middle':
                             labelX = (barLeft + barRight) / 2;
                             break;
-                        case 'bottom': // end of bar (right side)
-                            labelX = barRight - boxWidth / 2 - inset;
+                        case 'bottom':
+                            labelX = isNegative
+                                ? barLeft + boxWidth / 2 + inset
+                                : barRight - boxWidth / 2 - inset;
                             break;
                     }
-                    // Check if it fits inside the bar
                     if (boxWidth + minPadding > barWidth) {
                         shouldRender = false;
                     }
-                    // In layer mode, check the label fits in the visible gap
-                    // before the next layer's bar end
                     if (shouldRender &&
-                        mode === 'layer' &&
-                        insidePosition === 'top' &&
-                        stackingContext?.nextLayerData) {
-                        const nextValue = stackingContext.nextLayerData.get(categoryKey);
-                        if (nextValue !== undefined) {
-                            const nextBarRight = x(nextValue) || 0;
-                            const labelRight = labelX + boxWidth / 2;
-                            if (labelRight + LAYER_LABEL_GAP > nextBarRight) {
-                                shouldRender = false;
-                            }
+                        position === 'inside' &&
+                        insidePosition !== 'middle') {
+                        const labelLeft = labelX - boxWidth / 2;
+                        const labelRight = labelX + boxWidth / 2;
+                        if (labelLeft < barLeft + 1 ||
+                            labelRight > barRight - 1) {
+                            shouldRender = false;
                         }
                     }
                 }