@internetstiftelsen/charts 0.1.0 → 0.2.0

package/bar.js

@@ -387,7 +387,7 @@ export class Bar {
             const boxWidth = textBBox.width + padding * 2;
             const boxHeight = textBBox.height + padding * 2;
             const labelX = barCenterX;
-            let labelY;
+            let labelY = (barTop + barBottom) / 2; // Default to middle
             let shouldRender = true;
             if (position === 'outside') {
                 // Place above the bar
@@ -399,21 +399,76 @@ export class Bar {
                 }
             }
             else {
-                // Inside the bar
-                switch (insidePosition) {
-                    case 'top':
-                        labelY = barTop + boxHeight / 2 + 4;
-                        break;
-                    case 'middle':
-                        labelY = (barTop + barBottom) / 2;
-                        break;
-                    case 'bottom':
-                        labelY = barBottom - boxHeight / 2 - 4;
-                        break;
+                // Inside the bar - with special handling for layer mode
+                if (mode === 'layer') {
+                    const totalSeries = stackingContext?.totalSeries ?? 1;
+                    const seriesIndex = stackingContext?.seriesIndex ?? 0;
+                    const isTopLayer = seriesIndex === totalSeries - 1;
+                    switch (insidePosition) {
+                        case 'top':
+                            // For layer mode + inside + top: check if there's enough space in the gap
+                            if (seriesIndex < totalSeries - 1) {
+                                // Calculate the gap to the next layer
+                                const nextLayerScaleFactor = 1 - ((seriesIndex + 1) / totalSeries) * 0.7;
+                                const nextLayerWidth = (this.maxBarSize
+                                    ? Math.min(bandwidth, this.maxBarSize)
+                                    : bandwidth) * nextLayerScaleFactor;
+                                const gap = (barWidth - nextLayerWidth) / 2;
+                                const marginBelow = 4; // Minimum margin below text
+                                if (boxHeight + marginBelow <= gap) {
+                                    labelY =
+                                        barTop + boxHeight / 2 + marginBelow;
+                                }
+                                else {
+                                    shouldRender = false;
+                                }
+                            }
+                            else {
+                                // Top layer - use normal top position if it fits
+                                labelY = barTop + boxHeight / 2 + 4;
+                                if (boxHeight + 8 > barHeight) {
+                                    shouldRender = false;
+                                }
+                            }
+                            break;
+                        case 'middle':
+                            // For layer mode + inside + middle: only show what fits
+                            labelY = (barTop + barBottom) / 2;
+                            if (boxHeight + 8 > barHeight) {
+                                shouldRender = false;
+                            }
+                            break;
+                        case 'bottom':
+                            // For layer mode + inside + bottom: only show for top layer if it fits
+                            if (isTopLayer) {
+                                labelY = barBottom - boxHeight / 2 - 4;
+                                if (boxHeight + 8 > barHeight) {
+                                    shouldRender = false;
+                                }
+                            }
+                            else {
+                                shouldRender = false;
+                            }
+                            break;
+                    }
                 }
-                // Check if it fits inside the bar
-                if (boxHeight + 8 > barHeight) {
-                    shouldRender = false;
+                else {
+                    // Non-layer modes - use existing logic
+                    switch (insidePosition) {
+                        case 'top':
+                            labelY = barTop + boxHeight / 2 + 4;
+                            break;
+                        case 'middle':
+                            labelY = (barTop + barBottom) / 2;
+                            break;
+                        case 'bottom':
+                            labelY = barBottom - boxHeight / 2 - 4;
+                            break;
+                    }
+                    // Check if it fits inside the bar
+                    if (boxHeight + 8 > barHeight) {
+                        shouldRender = false;
+                    }
                 }
             }
             tempText.remove();
@@ -543,7 +598,7 @@ export class Bar {
             const textBBox = tempText.node().getBBox();
             const boxWidth = textBBox.width + padding * 2;
             const boxHeight = textBBox.height + padding * 2;
-            let labelX;
+            let labelX = (barLeft + barRight) / 2; // Default to middle
             const labelY = barCenterY;
             let shouldRender = true;
             if (position === 'outside') {
@@ -556,21 +611,78 @@ export class Bar {
                 }
             }
             else {
-                // Inside the bar - map top/middle/bottom to start/middle/end for horizontal
-                switch (insidePosition) {
-                    case 'top': // start of bar (left side)
-                        labelX = barLeft + boxWidth / 2 + 4;
-                        break;
-                    case 'middle':
-                        labelX = (barLeft + barRight) / 2;
-                        break;
-                    case 'bottom': // end of bar (right side)
-                        labelX = barRight - boxWidth / 2 - 4;
-                        break;
+                // Inside the bar - with special handling for layer mode
+                if (mode === 'layer') {
+                    const totalSeries = stackingContext?.totalSeries ?? 1;
+                    const seriesIndex = stackingContext?.seriesIndex ?? 0;
+                    const isTopLayer = seriesIndex === totalSeries - 1;
+                    // Map top/middle/bottom to start/middle/end for horizontal
+                    switch (insidePosition) {
+                        case 'top': // start of bar (left side)
+                            // For layer mode + inside + top(left): check if there's enough space in the gap
+                            if (seriesIndex < totalSeries - 1) {
+                                // Calculate the gap to the next layer
+                                const nextLayerScaleFactor = 1 - ((seriesIndex + 1) / totalSeries) * 0.7;
+                                const nextLayerHeight = (this.maxBarSize
+                                    ? Math.min(bandwidth, this.maxBarSize)
+                                    : bandwidth) * nextLayerScaleFactor;
+                                const gap = (barHeight - nextLayerHeight) / 2;
+                                const marginRight = 4; // Minimum margin to the right of text
+                                if (boxWidth + marginRight <= gap) {
+                                    labelX =
+                                        barLeft + boxWidth / 2 + marginRight;
+                                }
+                                else {
+                                    shouldRender = false;
+                                }
+                            }
+                            else {
+                                // Top layer - use normal left position if it fits
+                                labelX = barLeft + boxWidth / 2 + 4;
+                                if (boxWidth + 8 > barWidth) {
+                                    shouldRender = false;
+                                }
+                            }
+                            break;
+                        case 'middle':
+                            // For layer mode + inside + middle: only show what fits
+                            labelX = (barLeft + barRight) / 2;
+                            if (boxWidth + 8 > barWidth) {
+                                shouldRender = false;
+                            }
+                            break;
+                        case 'bottom': // end of bar (right side)
+                            // For layer mode + inside + bottom(right): only show for top layer if it fits
+                            if (isTopLayer) {
+                                labelX = barRight - boxWidth / 2 - 4;
+                                if (boxWidth + 8 > barWidth) {
+                                    shouldRender = false;
+                                }
+                            }
+                            else {
+                                shouldRender = false;
+                            }
+                            break;
+                    }
                 }
-                // Check if it fits inside the bar
-                if (boxWidth + 8 > barWidth) {
-                    shouldRender = false;
+                else {
+                    // Non-layer modes - use existing logic
+                    // Map top/middle/bottom to start/middle/end for horizontal
+                    switch (insidePosition) {
+                        case 'top': // start of bar (left side)
+                            labelX = barLeft + boxWidth / 2 + 4;
+                            break;
+                        case 'middle':
+                            labelX = (barLeft + barRight) / 2;
+                            break;
+                        case 'bottom': // end of bar (right side)
+                            labelX = barRight - boxWidth / 2 - 4;
+                            break;
+                    }
+                    // Check if it fits inside the bar
+                    if (boxWidth + 8 > barWidth) {
+                        shouldRender = false;
+                    }
                 }
             }
             tempText.remove();

package/base-chart.js

@@ -237,9 +237,7 @@ export class BaseChart {
      * @returns The exported content as a string if download is false/undefined, void if download is true
      */
     export(format, options) {
-        const content = format === 'svg'
-            ? this.exportSVG()
-            : this.exportJSON();
+        const content = format === 'svg' ? this.exportSVG() : this.exportJSON();
         if (options?.download) {
             this.downloadContent(content, format, options);
             return;
@@ -250,9 +248,7 @@ export class BaseChart {
      * Downloads the exported content as a file
      */
     downloadContent(content, format, options) {
-        const mimeType = format === 'svg'
-            ? 'image/svg+xml'
-            : 'application/json';
+        const mimeType = format === 'svg' ? 'image/svg+xml' : 'application/json';
         const blob = new Blob([content], { type: mimeType });
         const url = URL.createObjectURL(blob);
         const link = document.createElement('a');

package/line.js

@@ -50,7 +50,9 @@ export class Line {
                 case 'time':
                     // Time scale - convert to Date
                     scaledValue =
-                        xValue instanceof Date ? xValue : new Date(String(xValue));
+                        xValue instanceof Date
+                            ? xValue
+                            : new Date(String(xValue));
                     break;
                 case 'linear':
                 case 'log':
@@ -63,7 +65,13 @@ export class Line {
             // Handle band scales with bandwidth
             return (scaled || 0) + (x.bandwidth ? x.bandwidth() / 2 : 0);
         };
+        // Helper to check if a data point has a valid (non-null) value
+        const hasValidValue = (d) => {
+            const value = d[this.dataKey];
+            return value !== null && value !== undefined;
+        };
         const lineGenerator = line()
+            .defined(hasValidValue)
             .x(getXPosition)
             .y((d) => y(parseValue(d[this.dataKey])) || 0);
         const lineStrokeWidth = this.strokeWidth ?? theme.line.strokeWidth;
@@ -79,11 +87,12 @@ export class Line {
             .attr('stroke', this.stroke)
             .attr('stroke-width', lineStrokeWidth)
             .attr('d', lineGenerator);
-        // Add data point circles
+        // Add data point circles (only for valid values)
+        const validData = data.filter(hasValidValue);
         const sanitizedKey = sanitizeForCSS(this.dataKey);
         plotGroup
             .selectAll(`.circle-${sanitizedKey}`)
-            .data(data)
+            .data(validData)
             .join('circle')
             .attr('class', `circle-${sanitizedKey}`)
             .attr('cx', getXPosition)
@@ -92,9 +101,9 @@ export class Line {
             .attr('fill', pointColor)
             .attr('stroke', pointStrokeColor)
             .attr('stroke-width', pointStrokeWidth);
-        // Render value labels if enabled
+        // Render value labels if enabled (only for valid values)
         if (this.valueLabel?.show) {
-            this.renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition);
+            this.renderValueLabels(plotGroup, validData, y, parseValue, theme, getXPosition);
         }
     }
     renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition) {

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.1.0",
+    "version": "0.2.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,

package/tooltip.js

@@ -59,7 +59,6 @@ export class Tooltip {
             .style('font-family', theme.axis.fontFamily)
             .style('font-size', '12px')
             .style('pointer-events', 'none')
-            .style('transition', 'left 0.1s ease-out, top 0.1s ease-out')
             .style('z-index', '1000');
     }
     attachToArea(svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal = false) {
@@ -171,8 +170,7 @@ export class Tooltip {
             if (hasBarSeries) {
                 barSeries.forEach((s) => {
                     const sanitizedKey = sanitizeForCSS(s.dataKey);
-                    svg.selectAll(`.bar-${sanitizedKey}`)
-                        .style('opacity', (_, i) => i === closestIndex ? 1 : 0.5);
+                    svg.selectAll(`.bar-${sanitizedKey}`).style('opacity', (_, i) => (i === closestIndex ? 1 : 0.5));
                 });
             }
             // Build tooltip content
@@ -197,33 +195,74 @@ export class Tooltip {
                     }
                 });
             }
-            // Position tooltip relative to the data point
+            // Position tooltip: X anchored to data point, Y at midpoint of values
+            tooltip.style('visibility', 'visible').html(content);
+            // Get tooltip dimensions after content is set
+            const tooltipNode = tooltip.node();
+            const tooltipRect = tooltipNode.getBoundingClientRect();
+            const tooltipWidth = tooltipRect.width;
+            const tooltipHeight = tooltipRect.height;
             const svgRect = svg.node().getBoundingClientRect();
+            const offsetX = 12;
+            // Calculate min/max values across all series for this data point
+            const values = series.map((s) => parseValue(dataPoint[s.dataKey]));
+            const minValue = Math.min(...values);
+            const maxValue = Math.max(...values);
             let tooltipX;
             let tooltipY;
             if (isHorizontal) {
-                // Horizontal: position near bar end (X = value, Y = category)
-                tooltipX =
-                    svgRect.left +
-                        window.scrollX +
-                        x(parseValue(dataPoint[series[0].dataKey])) +
-                        10;
+                // Horizontal: X at midpoint of values, Y anchored to category
+                const minX = x(minValue);
+                const maxX = x(maxValue);
+                const midX = (minX + maxX) / 2;
+                tooltipX = svgRect.left + window.scrollX + midX + offsetX;
                 tooltipY =
-                    svgRect.top + window.scrollY + dataPointPosition - 10;
+                    svgRect.top +
+                        window.scrollY +
+                        dataPointPosition -
+                        tooltipHeight / 2;
             }
             else {
-                // Vertical: position near data point (X = category, Y = value)
+                // Vertical: X anchored to category, Y at midpoint of values
+                const minY = y(maxValue); // Note: Y scale is inverted
+                const maxY = y(minValue);
+                const midY = (minY + maxY) / 2;
                 tooltipX =
-                    svgRect.left + window.scrollX + dataPointPosition + 10;
+                    svgRect.left +
+                        window.scrollX +
+                        dataPointPosition +
+                        offsetX;
                 tooltipY =
-                    svgRect.top +
-                        window.scrollY +
-                        y(parseValue(dataPoint[series[0].dataKey])) -
-                        10;
+                    svgRect.top + window.scrollY + midY - tooltipHeight / 2;
+            }
+            // Edge detection - flip horizontally if approaching right edge
+            const viewportWidth = window.innerWidth;
+            if (tooltipX + tooltipWidth > viewportWidth - 10) {
+                if (isHorizontal) {
+                    const minX = x(minValue);
+                    tooltipX =
+                        svgRect.left +
+                            window.scrollX +
+                            minX -
+                            tooltipWidth -
+                            offsetX;
+                }
+                else {
+                    tooltipX =
+                        svgRect.left +
+                            window.scrollX +
+                            dataPointPosition -
+                            tooltipWidth -
+                            offsetX;
+                }
             }
+            // Ensure tooltip doesn't go off edges
+            tooltipX = Math.max(10, tooltipX);
+            tooltipY = Math.max(10, Math.min(tooltipY, window.innerHeight +
+                window.scrollY -
+                tooltipHeight -
+                10));
             tooltip
-                .style('visibility', 'visible')
-                .html(content)
                 .style('left', `${tooltipX}px`)
                 .style('top', `${tooltipY}px`);
         })

package/types.d.ts

@@ -97,6 +97,10 @@ export type XAxisConfig = {
     rotatedLabels?: boolean;
     maxLabelWidth?: number;
     oversizedBehavior?: LabelOversizedBehavior;
+    tickFormat?: string | ((value: number) => string) | null;
+    autoHideOverlapping?: boolean;
+    minLabelGap?: number;
+    preserveEndLabels?: boolean;
 };
 export type YAxisConfig = {
     tickFormat?: string | ((value: number) => string) | null;

package/x-axis.d.ts

@@ -9,7 +9,11 @@ export declare class XAxis implements LayoutAwareComponent {
     private readonly fontSize;
     private readonly maxLabelWidth?;
     private readonly oversizedBehavior;
+    private readonly tickFormat;
     private wrapLineCount;
+    private readonly autoHideOverlapping;
+    private readonly minLabelGap;
+    private readonly preserveEndLabels;
     constructor(config?: XAxisConfig);
     /**
      * Returns the space required by the x-axis
@@ -19,4 +23,5 @@ export declare class XAxis implements LayoutAwareComponent {
     private applyLabelConstraints;
     private wrapTextElement;
     private addTitleTooltip;
+    private applyAutoHiding;
 }

package/x-axis.js

@@ -44,16 +44,45 @@ export class XAxis {
             writable: true,
             value: void 0
         });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Object.defineProperty(this, "tickFormat", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "wrapLineCount", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: 1
         });
+        Object.defineProperty(this, "autoHideOverlapping", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "minLabelGap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "preserveEndLabels", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.dataKey = config?.dataKey;
         this.rotatedLabels = config?.rotatedLabels ?? false;
         this.maxLabelWidth = config?.maxLabelWidth;
         this.oversizedBehavior = config?.oversizedBehavior ?? 'truncate';
+        this.tickFormat = config?.tickFormat ?? null;
+        this.autoHideOverlapping = config?.autoHideOverlapping ?? false;
+        this.minLabelGap = config?.minLabelGap ?? 8;
+        this.preserveEndLabels = config?.preserveEndLabels ?? true;
     }
     /**
      * Returns the space required by the x-axis
@@ -64,7 +93,9 @@ export class XAxis {
         const baseHeight = this.tickPadding + this.fontSize + 5;
         let height = this.rotatedLabels ? baseHeight * 2.5 : baseHeight;
         // Account for wrapped text height (multiply by estimated line count)
-        if (this.maxLabelWidth && this.oversizedBehavior === 'wrap' && this.wrapLineCount > 1) {
+        if (this.maxLabelWidth &&
+            this.oversizedBehavior === 'wrap' &&
+            this.wrapLineCount > 1) {
             height += (this.wrapLineCount - 1) * this.fontSize * 1.2;
         }
         return {
@@ -74,14 +105,24 @@ export class XAxis {
         };
     }
     render(svg, x, theme, yPosition) {
+        const axisGenerator = axisBottom(x)
+            .tickSizeOuter(0)
+            .tickSize(0)
+            .tickPadding(this.tickPadding);
+        // Apply tick formatting if specified
+        if (this.tickFormat) {
+            if (typeof this.tickFormat === 'function') {
+                axisGenerator.tickFormat(this.tickFormat);
+            }
+            else {
+                axisGenerator.ticks(5, this.tickFormat);
+            }
+        }
         const axis = svg
             .append('g')
             .attr('class', 'x-axis')
             .attr('transform', `translate(0,${yPosition})`)
-            .call(axisBottom(x)
-            .tickSizeOuter(0)
-            .tickSize(0)
-            .tickPadding(this.tickPadding))
+            .call(axisGenerator)
             .attr('font-size', theme.axis.fontSize)
             .attr('font-family', theme.axis.fontFamily)
             .attr('font-weight', theme.axis.fontWeight || 'normal')
@@ -96,6 +137,8 @@ export class XAxis {
                 .style('text-anchor', 'end')
                 .attr('transform', 'rotate(-45)');
         }
+        // Apply auto-hiding for overlapping labels
+        this.applyAutoHiding(axis, x);
         axis.selectAll('.domain').remove();
     }
     applyLabelConstraints(axisGroup, svg, fontSize, fontFamily, fontWeight) {
@@ -103,7 +146,9 @@ export class XAxis {
             return;
         const maxWidth = this.maxLabelWidth;
         const behavior = this.oversizedBehavior;
-        axisGroup.selectAll('text').each((_d, i, nodes) => {
+        axisGroup
+            .selectAll('text')
+            .each((_d, i, nodes) => {
             const textEl = nodes[i];
             const originalText = textEl.textContent || '';
             const textWidth = measureTextWidth(originalText, fontSize, fontFamily, fontWeight, svg);
@@ -154,4 +199,62 @@ export class XAxis {
         title.textContent = text;
         textEl.insertBefore(title, textEl.firstChild);
     }
+    applyAutoHiding(axisGroup, scale) {
+        if (!this.autoHideOverlapping)
+            return;
+        const textElements = axisGroup
+            .selectAll('text')
+            .nodes();
+        const labelCount = textElements.length;
+        if (labelCount <= 1)
+            return;
+        // Measure all label widths
+        let maxLabelWidth = 0;
+        for (const textEl of textElements) {
+            const bbox = textEl.getBBox();
+            // For rotated labels, use the horizontal footprint
+            const effectiveWidth = this.rotatedLabels
+                ? bbox.width * Math.cos(Math.PI / 4)
+                : bbox.width;
+            maxLabelWidth = Math.max(maxLabelWidth, effectiveWidth);
+        }
+        // Calculate available space per label
+        const bandwidth = typeof scale.bandwidth === 'function' ? scale.bandwidth() : 0;
+        const availableSpace = bandwidth > 0
+            ? bandwidth
+            : (scale.range()[1] - scale.range()[0]) / labelCount;
+        // Calculate skip interval
+        const requiredSpace = maxLabelWidth + this.minLabelGap;
+        const skipInterval = Math.ceil(requiredSpace / availableSpace);
+        // If no skipping needed, show all labels
+        if (skipInterval <= 1)
+            return;
+        // Apply visibility
+        textElements.forEach((textEl, index) => {
+            const isFirst = index === 0;
+            const isLast = index === labelCount - 1;
+            const isAtInterval = index % skipInterval === 0;
+            if (this.preserveEndLabels && (isFirst || isLast)) {
+                textEl.style.visibility = 'visible';
+            }
+            else if (isAtInterval) {
+                textEl.style.visibility = 'visible';
+            }
+            else {
+                textEl.style.visibility = 'hidden';
+            }
+        });
+        // Handle edge case: if last label is preserved but would overlap with the last visible interval label
+        if (this.preserveEndLabels && labelCount > 1) {
+            const lastVisibleIntervalIndex = Math.floor((labelCount - 2) / skipInterval) * skipInterval;
+            if (lastVisibleIntervalIndex !== labelCount - 1 &&
+                labelCount - 1 - lastVisibleIntervalIndex < skipInterval) {
+                // Hide the last interval label to avoid overlap with preserved last label
+                const textEl = textElements[lastVisibleIntervalIndex];
+                if (textEl && lastVisibleIntervalIndex !== 0) {
+                    textEl.style.visibility = 'hidden';
+                }
+            }
+        }
+    }
 }

package/xy-chart.d.ts

@@ -6,8 +6,6 @@ export type XYChartConfig = BaseChartConfig & {
 };
 export declare class XYChart extends BaseChart {
     private readonly series;
-    private sortedDataCache;
-    private xKeyCache;
     private barStackMode;
     private barStackGap;
     constructor(config: XYChartConfig);
@@ -15,7 +13,6 @@ export declare class XYChart extends BaseChart {
     private rerender;
     protected renderChart(): void;
     private getXKey;
-    private getSortedData;
     private setupScales;
     private isHorizontalOrientation;
     private createScale;

package/xy-chart.js

@@ -11,18 +11,6 @@ export class XYChart extends BaseChart {
             writable: true,
             value: []
         });
-        Object.defineProperty(this, "sortedDataCache", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "xKeyCache", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
         Object.defineProperty(this, "barStackMode", {
             enumerable: true,
             configurable: true,
@@ -97,9 +85,7 @@ export class XYChart extends BaseChart {
         if (this.xAxis?.dataKey) {
             ChartValidator.validateDataKey(this.data, this.xAxis.dataKey, 'XAxis');
         }
-        // Cache sorted data
         const xKey = this.getXKey();
-        const sortedData = this.getSortedData(xKey);
         this.setupScales();
         // Render title if present
         if (this.title) {
@@ -124,7 +110,7 @@ export class XYChart extends BaseChart {
         // Render tooltip
         if (this.tooltip && this.x && this.y) {
             this.tooltip.initialize(this.theme);
-            this.tooltip.attachToArea(this.svg, sortedData, this.series, xKey, this.x, this.y, this.theme, this.plotArea, this.parseValue.bind(this), this.isHorizontalOrientation());
+            this.tooltip.attachToArea(this.svg, this.data, this.series, xKey, this.x, this.y, this.theme, this.plotArea, this.parseValue.bind(this), this.isHorizontalOrientation());
         }
         // Render legend if present
         if (this.legend) {
@@ -138,16 +124,6 @@ export class XYChart extends BaseChart {
         }
         return (Object.keys(this.data[0]).find((key) => !this.series.some((s) => s.dataKey === key)) || 'column');
     }
-    getSortedData(xKey) {
-        // Return cached data if xKey matches
-        if (this.sortedDataCache && this.xKeyCache === xKey) {
-            return this.sortedDataCache;
-        }
-        // Sort and cache
-        this.xKeyCache = xKey;
-        this.sortedDataCache = [...this.data].sort((a, b) => String(a[xKey]).localeCompare(String(b[xKey])));
-        return this.sortedDataCache;
-    }
     setupScales() {
         const xKey = this.getXKey();
         const isHorizontal = this.isHorizontalOrientation();
@@ -285,7 +261,6 @@ export class XYChart extends BaseChart {
         if (!this.plotGroup || !this.x || !this.y)
             return;
         const xKey = this.getXKey();
-        const sortedData = this.getSortedData(xKey);
         const isHorizontal = this.isHorizontalOrientation();
         // For horizontal bars, the category scale is on Y (user's X config becomes Y)
         // For vertical bars, the category scale is on X (user's X config stays X)
@@ -299,23 +274,24 @@ export class XYChart extends BaseChart {
         // Get only bar series for stacking calculations
         const barSeries = visibleSeries.filter((s) => s.type === 'bar');
         // Compute stacking data for bar charts
-        const { cumulativeDataBySeriesIndex, totalData } = this.computeStackingData(sortedData, xKey, barSeries);
-        visibleSeries.forEach((series) => {
-            if (series.type === 'bar') {
-                const barIndex = barSeries.indexOf(series);
-                const stackingContext = {
-                    mode: this.barStackMode,
-                    seriesIndex: barIndex,
-                    totalSeries: barSeries.length,
-                    cumulativeData: cumulativeDataBySeriesIndex.get(barIndex) ?? new Map(),
-                    totalData,
-                    gap: this.barStackGap,
-                };
-                series.render(this.plotGroup, sortedData, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme, stackingContext);
-            }
-            else {
-                series.render(this.plotGroup, sortedData, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme);
-            }
+        const { cumulativeDataBySeriesIndex, totalData } = this.computeStackingData(this.data, xKey, barSeries);
+        // Render bars first, then lines, so lines always appear on top
+        const lineSeries = visibleSeries.filter((s) => s.type !== 'bar');
+        // Render all bar series first
+        barSeries.forEach((series, barIndex) => {
+            const stackingContext = {
+                mode: this.barStackMode,
+                seriesIndex: barIndex,
+                totalSeries: barSeries.length,
+                cumulativeData: cumulativeDataBySeriesIndex.get(barIndex) ?? new Map(),
+                totalData,
+                gap: this.barStackGap,
+            };
+            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme, stackingContext);
+        });
+        // Render all line series on top
+        lineSeries.forEach((series) => {
+            series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme);
         });
     }
     computeStackingData(data, xKey, barSeries) {

package/y-axis.js

@@ -100,7 +100,9 @@ export class YAxis {
     applyLabelConstraints(axisGroup, svg, fontSize, fontFamily, fontWeight) {
         const maxWidth = this.maxLabelWidth;
         const behavior = this.oversizedBehavior;
-        axisGroup.selectAll('text').each((_d, i, nodes) => {
+        axisGroup
+            .selectAll('text')
+            .each((_d, i, nodes) => {
             const textEl = nodes[i];
             const originalText = textEl.textContent || '';
             const textWidth = measureTextWidth(originalText, fontSize, fontFamily, fontWeight, svg);