@acorex/charts 20.7.60 → 20.7.61

package/fesm2022/acorex-charts-line-chart.mjs

@@ -5,10 +5,10 @@ import { InjectionToken, input, output, viewChild, signal, inject, computed, eff
 
 const AXLineChartDefaultConfig = {
     margins: {
-        top: 20,
-        right: 25,
-        bottom: 40,
-        left: 50,
+        top: 12,
+        right: 12,
+        bottom: 8,
+        left: 8,
     },
     showXAxis: true,
     showYAxis: true,
@@ -59,6 +59,7 @@ class AXLineChartComponent extends AXChartComponent {
     svg;
     chart;
     xScale;
+    xScaleKind = 'linear';
     yScale;
     xAxis;
     yAxis;
@@ -109,15 +110,18 @@ class AXLineChartComponent extends AXChartComponent {
     }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
     // Layout & Dimensions
     MIN_DIMENSION = 100;
-    MIN_CONTAINER_DIMENSION = 200;
-    DEFAULT_MARGIN_TOP = 20;
-    DEFAULT_MARGIN_RIGHT = 25;
-    DEFAULT_MARGIN_BOTTOM = 40;
-    DEFAULT_MARGIN_LEFT = 50;
-    MIN_MARGIN_BOTTOM = 45;
-    MIN_MARGIN_LEFT = 55;
-    MAX_EXTRA_MARGIN = 60;
-    CHART_EDGE_PADDING = 12;
+    DEFAULT_MARGIN_TOP = 12;
+    DEFAULT_MARGIN_RIGHT = 12;
+    DEFAULT_MARGIN_BOTTOM = 8;
+    DEFAULT_MARGIN_LEFT = 8;
+    MIN_MARGIN_BOTTOM = 28;
+    MIN_MARGIN_LEFT = 36;
+    X_AXIS_TITLE_GAP = 10;
+    TICK_AREA_PADDING = 4;
+    AXIS_TICK_PADDING = 6;
+    ROTATION_TOLERANCE = 0.92;
+    FORCE_ROTATE_LABEL_LENGTH = 14;
+    Y_AXIS_TITLE_PADDING = 10;
     // Styling & Visual
     DEFAULT_LINE_WIDTH = 2;
     DEFAULT_POINT_RADIUS = 4;
@@ -136,16 +140,178 @@ class AXLineChartComponent extends AXChartComponent {
     POINT_ANIMATION_DELAY_RATIO = 0.5;
     POINT_ANIMATION_DURATION_RATIO = 0.3;
     // Text & Labels
-    AXIS_LABEL_FONT_SIZE = 14;
     CHAR_WIDTH_RATIO = 0.6;
     FONT_WIDTH_MULTIPLIER = 0.6;
     MAX_LABEL_LENGTH = 20;
-    MIN_FONT_SIZE_X = 11;
-    MAX_FONT_SIZE_X = 15;
+    MIN_FONT_SIZE_X = 10;
+    MAX_FONT_SIZE_X = 16;
     MIN_FONT_SIZE_Y = 11;
-    MAX_FONT_SIZE_Y = 15;
-    FONT_PADDING = 10;
-    Y_AXIS_PADDING = 10;
+    MAX_FONT_SIZE_Y = 16;
+    FONT_PADDING = 6;
+    xAxisLabelLayout = {
+        fontSize: 12,
+        willRotate: false,
+        tickAreaHeight: 24,
+        displayedTickCount: 1,
+    };
+    /**
+     * Resolves X-axis tick font size, rotation, and reserved tick area height.
+     */
+    resolveXAxisLabelLayout(chartWidth, categoricalLabels) {
+        if (!categoricalLabels || categoricalLabels.length === 0) {
+            const displayedTickCount = Math.min(12, Math.max(5, Math.floor(chartWidth / 80)));
+            const fontSize = this.getXAxisTickFontSize(chartWidth, displayedTickCount);
+            const tickAreaHeight = fontSize + this.TICK_AREA_PADDING + this.AXIS_TICK_PADDING;
+            return { fontSize, willRotate: false, tickAreaHeight, displayedTickCount };
+        }
+        const itemCount = categoricalLabels.length;
+        const longestLabel = categoricalLabels.reduce((a, b) => (a.length > b.length ? a : b), '');
+        const effectiveLength = this.getEffectiveXLabelLength(longestLabel, itemCount);
+        const step = itemCount > 1 ? chartWidth / (itemCount - 1) : chartWidth;
+        let fontSize = this.getXAxisTickFontSize(chartWidth, itemCount);
+        let effectiveWidth = effectiveLength * fontSize * this.CHAR_WIDTH_RATIO;
+        while (effectiveWidth > step * this.ROTATION_TOLERANCE && fontSize > this.MIN_FONT_SIZE_X) {
+            fontSize--;
+            effectiveWidth = effectiveLength * fontSize * this.CHAR_WIDTH_RATIO;
+        }
+        const willRotate = longestLabel.length >= this.FORCE_ROTATE_LABEL_LENGTH ||
+            effectiveWidth > step * this.ROTATION_TOLERANCE;
+        if (willRotate && effectiveWidth > step) {
+            while (effectiveWidth > step * 1.35 && fontSize > this.MIN_FONT_SIZE_X) {
+                fontSize--;
+                effectiveWidth = effectiveLength * fontSize * this.CHAR_WIDTH_RATIO;
+            }
+        }
+        const tickAreaHeight = this.estimateXAxisTickAreaHeight(fontSize, effectiveWidth, willRotate);
+        let displayedTickCount = itemCount;
+        if (itemCount > this.VERY_MANY_ITEMS_THRESHOLD) {
+            displayedTickCount = Math.ceil(itemCount / 5);
+        }
+        else if (itemCount > this.MANY_ITEMS_THRESHOLD) {
+            displayedTickCount = Math.ceil(itemCount / 2);
+        }
+        return { fontSize, willRotate, tickAreaHeight, displayedTickCount };
+    }
+    /**
+     * Returns truncated label length used for layout calculations.
+     */
+    getEffectiveXLabelLength(label, itemCount) {
+        const maxLength = itemCount > this.MANY_ITEMS_THRESHOLD ? 10 : this.MAX_LABEL_LENGTH;
+        return Math.min(label.length, maxLength);
+    }
+    /**
+     * Estimates vertical space required below the X-axis for tick labels.
+     */
+    estimateXAxisTickAreaHeight(fontSize, effectiveLabelWidth, willRotate) {
+        if (willRotate) {
+            return effectiveLabelWidth * Math.SQRT1_2 + fontSize * Math.SQRT1_2 + this.TICK_AREA_PADDING + this.AXIS_TICK_PADDING;
+        }
+        return fontSize + this.TICK_AREA_PADDING + this.AXIS_TICK_PADDING;
+    }
+    /**
+     * Measures rendered X-axis tick label area using the axis group bounding box.
+     */
+    measureXAxisTickAreaHeight(axisGroup, fontSize, fallbackHeight) {
+        if (!axisGroup) {
+            return fallbackHeight;
+        }
+        try {
+            const bbox = axisGroup.getBBox();
+            const measured = Math.max(0, bbox.y + bbox.height) + this.TICK_AREA_PADDING;
+            return Math.max(measured, fallbackHeight);
+        }
+        catch {
+            return fallbackHeight;
+        }
+    }
+    /**
+     * Measures rendered Y-axis tick label width using SVG bounding boxes.
+     */
+    measureMaxYAxisTickLabelWidth(tickNodes, fontSize) {
+        try {
+            if (tickNodes.length > 0) {
+                return Math.max(...tickNodes.map((node) => node.getBBox().width)) + this.FONT_PADDING;
+            }
+        }
+        catch {
+            // Fall through to estimation
+        }
+        return this.calculateMaxYAxisTickLabelWidth(fontSize);
+    }
+    /**
+     * Calculates required bottom margin for X-axis ticks, optional rotation, and title.
+     */
+    calculateRequiredBottomMargin(options, chartWidth, categoricalLabels) {
+        const baseBottom = options.margins?.bottom ?? this.DEFAULT_MARGIN_BOTTOM;
+        if (options.showXAxis === false) {
+            return Math.max(baseBottom, 8);
+        }
+        const layout = this.resolveXAxisLabelLayout(chartWidth, categoricalLabels);
+        this.xAxisLabelLayout.fontSize = layout.fontSize;
+        this.xAxisLabelLayout.willRotate = layout.willRotate;
+        this.xAxisLabelLayout.tickAreaHeight = layout.tickAreaHeight;
+        this.xAxisLabelLayout.displayedTickCount = layout.displayedTickCount;
+        const titleBlock = options.xAxisLabel
+            ? this.X_AXIS_TITLE_GAP + this.getAxisTitleFontSize(layout.fontSize) + 2
+            : 0;
+        const rotatedBuffer = layout.willRotate ? 12 : 4;
+        return Math.max(baseBottom, this.MIN_MARGIN_BOTTOM, layout.tickAreaHeight + titleBlock + rotatedBuffer);
+    }
+    /**
+     * Calculates required left margin for Y-axis ticks and title.
+     */
+    calculateRequiredLeftMargin(options, chartHeight) {
+        const baseLeft = options.margins?.left ?? this.DEFAULT_MARGIN_LEFT;
+        if (options.showYAxis === false) {
+            return baseLeft;
+        }
+        const fontSize = this.getYAxisTickFontSize(chartHeight);
+        const tickLabelWidth = this.calculateMaxYAxisTickLabelWidth(fontSize);
+        const titleBlock = options.yAxisLabel
+            ? this.Y_AXIS_TITLE_PADDING + this.getAxisTitleFontSize(fontSize) + 4
+            : 0;
+        return Math.max(baseLeft, this.MIN_MARGIN_LEFT, tickLabelWidth + this.AXIS_TICK_PADDING + titleBlock + 4);
+    }
+    createXAxisTitle(axesGroup, title, tickAreaHeight, tickFontSize) {
+        const titleFontSize = this.getAxisTitleFontSize(tickFontSize);
+        const titleY = Math.min(this.height + tickAreaHeight + this.X_AXIS_TITLE_GAP, this.height + this.margin.bottom - titleFontSize - 2);
+        axesGroup
+            .append('text')
+            .attr('class', 'ax-line-chart-axis-label ax-x-axis-label')
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'hanging')
+            .attr('x', this.width / 2)
+            .attr('y', titleY)
+            .attr('direction', 'ltr')
+            .attr('style', `
+        font-size: ${titleFontSize}px;
+        font-weight: 500;
+        fill: rgb(var(--ax-comp-line-chart-text-color));
+        pointer-events: none;
+      `)
+            .text(title);
+    }
+    createYAxisTitle(axesGroup, title, tickFontSize, maxTickLabelWidth) {
+        const titleFontSize = this.getAxisTitleFontSize(tickFontSize);
+        const labelY = -maxTickLabelWidth - this.Y_AXIS_TITLE_PADDING;
+        const labelX = -this.height / 2;
+        axesGroup
+            .append('text')
+            .attr('class', 'ax-line-chart-axis-label ax-y-axis-label')
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .attr('transform', 'rotate(-90)')
+            .attr('x', labelX)
+            .attr('y', labelY)
+            .attr('direction', 'ltr')
+            .attr('style', `
+        font-size: ${titleFontSize}px;
+        font-weight: 500;
+        fill: rgb(var(--ax-comp-line-chart-text-color));
+        pointer-events: none;
+      `)
+            .text(title);
+    }
     // Data & Performance
     MAX_POINTS_TO_RENDER = 100;
     POINT_COORDINATE_PRECISION = 10;
@@ -172,10 +338,41 @@ class AXLineChartComponent extends AXChartComponent {
         return series.id || series.label || `series-${series.originalIndex}`;
     }
     /**
-     * Calculates dynamic font size based on available space
+     * Calculates adaptive X-axis tick font size based on chart width and label count.
+     */
+    getXAxisTickFontSize(chartWidth, itemCount = 1) {
+        let size = chartWidth / 42;
+        if (itemCount > this.VERY_MANY_ITEMS_THRESHOLD) {
+            size *= 0.65;
+        }
+        else if (itemCount > this.MANY_ITEMS_THRESHOLD) {
+            size *= 0.8;
+        }
+        return Math.max(this.MIN_FONT_SIZE_X, Math.min(this.MAX_FONT_SIZE_X, Math.round(size)));
+    }
+    /**
+     * Calculates adaptive Y-axis tick font size based on chart height.
+     */
+    getYAxisTickFontSize(chartHeight) {
+        const size = chartHeight / 28;
+        return Math.max(this.MIN_FONT_SIZE_Y, Math.min(this.MAX_FONT_SIZE_Y, Math.round(size)));
+    }
+    /**
+     * Calculates axis title font size relative to tick labels.
      */
-    calculateDynamicFontSize(dimension, divisor, min, max) {
-        return Math.max(min, Math.min(max, Math.round(dimension / divisor)));
+    getAxisTitleFontSize(tickFontSize) {
+        return Math.min(15, Math.max(12, tickFontSize));
+    }
+    /**
+     * Estimates inner chart dimensions before margins are finalized.
+     */
+    estimateChartDimensions(containerWidth, containerHeight, options) {
+        const outerWidth = options.width ?? Math.max(containerWidth, 1);
+        const outerHeight = options.height ?? Math.max(containerHeight, 1);
+        return {
+            width: Math.max(outerWidth - this.margin.left - this.margin.right, this.MIN_DIMENSION),
+            height: Math.max(outerHeight - this.margin.top - this.margin.bottom, this.MIN_DIMENSION),
+        };
     }
     /**
      * Creates a unique key for point coordinates (for overlap detection)
@@ -202,7 +399,7 @@ class AXLineChartComponent extends AXChartComponent {
     /**
      * Calculates maximum width needed for Y-axis tick labels
      */
-    calculateMaxYAxisTickLabelWidth() {
+    calculateMaxYAxisTickLabelWidth(fontSize) {
         const allSeriesData = this._fullNormalizedData.filter((s) => !this.hiddenSeries.has(this.getSeriesIdentifier(s)));
         let maxValue = 0;
         let minValue = 0;
@@ -219,7 +416,7 @@ class AXLineChartComponent extends AXChartComponent {
         // Check both max and min (for negative values)
         const maxAbsValue = Math.max(Math.abs(maxValue), Math.abs(minValue));
         const tickLabelText = Number.isFinite(maxAbsValue) ? formatLargeNumber(maxAbsValue) : '00000';
-        return tickLabelText.length * this.AXIS_LABEL_FONT_SIZE * this.FONT_WIDTH_MULTIPLIER + this.FONT_PADDING;
+        return tickLabelText.length * fontSize * this.FONT_WIDTH_MULTIPLIER + this.FONT_PADDING;
     }
     ngOnInit() {
         this.loadD3();
@@ -369,95 +566,54 @@ class AXLineChartComponent extends AXChartComponent {
         this._tooltipVisible.set(false);
     }
     setupDimensions(containerElement, options) {
-        this.calculateMargins(options, containerElement.clientWidth);
-        const containerWidth = containerElement.clientWidth;
-        const containerHeight = containerElement.clientHeight;
-        const minDim = Math.min(this.MIN_CONTAINER_DIMENSION, containerWidth, containerHeight);
+        const containerWidth = Math.max(containerElement.clientWidth, 1);
+        const containerHeight = Math.max(containerElement.clientHeight, 1);
+        this.calculateMargins(options, containerWidth, containerHeight);
         if (options.width && options.height) {
             this.width = options.width - this.margin.left - this.margin.right;
             this.height = options.height - this.margin.top - this.margin.bottom;
         }
         else {
-            this.width = Math.max(containerWidth, minDim) - this.margin.left - this.margin.right;
-            this.height = Math.max(containerHeight, minDim) - this.margin.top - this.margin.bottom;
+            this.width = containerWidth - this.margin.left - this.margin.right;
+            this.height = containerHeight - this.margin.top - this.margin.bottom;
         }
         this.width = Math.max(this.width, this.MIN_DIMENSION);
         this.height = Math.max(this.height, this.MIN_DIMENSION);
         const totalWidth = this.width + this.margin.left + this.margin.right;
         const totalHeight = this.height + this.margin.top + this.margin.bottom;
-        const viewBoxWidth = totalWidth + this.CHART_EDGE_PADDING * 2;
-        const viewBoxHeight = totalHeight + this.CHART_EDGE_PADDING * 2;
         const svg = this.d3
             .select(containerElement)
             .append('svg')
             .attr('width', '100%')
             .attr('height', '100%')
-            .attr('viewBox', `0 0 ${viewBoxWidth} ${viewBoxHeight}`)
+            .attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`)
             .attr('preserveAspectRatio', 'xMidYMid meet');
         this.svg = svg;
         this.chart = this.svg
             .append('g')
-            .attr('transform', `translate(${this.margin.left + this.CHART_EDGE_PADDING},${this.margin.top + this.CHART_EDGE_PADDING})`);
+            .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
     }
-    calculateMargins(options, containerWidth) {
+    calculateMargins(options, containerWidth, containerHeight) {
         this.margin = {
             top: options.margins?.top ?? this.DEFAULT_MARGIN_TOP,
             right: options.margins?.right ?? this.DEFAULT_MARGIN_RIGHT,
             bottom: options.margins?.bottom ?? this.DEFAULT_MARGIN_BOTTOM,
             left: options.margins?.left ?? this.DEFAULT_MARGIN_LEFT,
         };
+        const estimatedDimensions = this.estimateChartDimensions(containerWidth, containerHeight, options);
         const allDataPoints = this._fullNormalizedData.flatMap((series) => series.data);
-        if (allDataPoints.length > 0) {
-            const allNumericX = allDataPoints.every((d) => typeof d.x === 'number');
-            if (!allNumericX) {
-                const visibleSeries = this._fullNormalizedData.filter((s) => !this.hiddenSeries.has(this.getSeriesIdentifier(s)));
-                const allXValues = new Set(visibleSeries.flatMap((series) => series.data.map((d) => String(d.x))));
-                const labelCount = allXValues.size;
-                if (labelCount > 0 && containerWidth > 0) {
-                    const workingWidth = containerWidth - this.margin.left - this.margin.right;
-                    if (workingWidth > 0) {
-                        const availableWidthPerLabel = workingWidth / labelCount;
-                        const labels = Array.from(allXValues);
-                        const longestLabel = labels.reduce((a, b) => (a.length > b.length ? a : b), '');
-                        const estimatedFontSize = this.calculateDynamicFontSize(workingWidth, 45, this.MIN_FONT_SIZE_X, this.MAX_FONT_SIZE_X);
-                        // Account for label truncation in width calculation
-                        const maxLabelLength = labelCount > this.MANY_ITEMS_THRESHOLD ? 10 : this.MAX_LABEL_LENGTH;
-                        const effectiveLabelLength = Math.min(longestLabel.length, maxLabelLength);
-                        const estimatedLongestLabelWidth = effectiveLabelLength * estimatedFontSize * this.CHAR_WIDTH_RATIO;
-                        if (estimatedLongestLabelWidth > availableWidthPerLabel) {
-                            // Calculate diagonal height when rotated -45 degrees
-                            const diagonalHeight = estimatedLongestLabelWidth * Math.sin(Math.PI / 4);
-                            const requiredExtraMargin = diagonalHeight + 15; // Extra padding for safety
-                            this.margin.bottom += Math.min(this.MAX_EXTRA_MARGIN, requiredExtraMargin);
-                        }
-                    }
-                }
-            }
-        }
-        if (options.xAxisLabel) {
-            const xLabelLength = options.xAxisLabel.length;
-            const extraBottomMargin = Math.min(20, Math.max(10, xLabelLength * 0.8));
-            this.margin.bottom = Math.max(this.margin.bottom, 40 + extraBottomMargin);
-        }
-        if (options.yAxisLabel) {
-            // Calculate space needed for Y-axis: tick labels + padding + title
-            const maxTickLabelWidth = this.calculateMaxYAxisTickLabelWidth();
-            const yAxisTitleThickness = 20; // Height of rotated title text
-            const yAxisTitlePadding = this.Y_AXIS_PADDING;
-            const totalYAxisWidth = maxTickLabelWidth + yAxisTitlePadding + yAxisTitleThickness;
-            this.margin.left = Math.max(this.margin.left, totalYAxisWidth);
-        }
-        else if (options.showYAxis !== false) {
-            // Just tick labels, no title
-            const maxTickLabelWidth = this.calculateMaxYAxisTickLabelWidth();
-            this.margin.left = Math.max(this.margin.left, maxTickLabelWidth + 10);
-        }
-        if (options.showXAxis !== false) {
-            this.margin.bottom = Math.max(this.margin.bottom, this.MIN_MARGIN_BOTTOM);
-        }
-        if (options.showYAxis !== false) {
-            this.margin.left = Math.max(this.margin.left, this.MIN_MARGIN_LEFT);
+        const allNumericX = allDataPoints.length === 0 || allDataPoints.every((d) => typeof d.x === 'number');
+        let categoricalLabels = null;
+        if (!allNumericX) {
+            const visibleSeries = this._fullNormalizedData.filter((s) => !this.hiddenSeries.has(this.getSeriesIdentifier(s)));
+            categoricalLabels = [...new Set(visibleSeries.flatMap((series) => series.data.map((d) => String(d.x))))];
         }
+        this.margin.bottom = this.calculateRequiredBottomMargin(options, estimatedDimensions.width, categoricalLabels);
+        this.margin.left = this.calculateRequiredLeftMargin(options, estimatedDimensions.height);
+        // Second pass: margins affect inner chart size, which affects label layout
+        const refinedDimensions = this.estimateChartDimensions(containerWidth, containerHeight, options);
+        this.margin.bottom = this.calculateRequiredBottomMargin(options, refinedDimensions.width, categoricalLabels);
+        this.margin.left = this.calculateRequiredLeftMargin(options, refinedDimensions.height);
     }
     setupScales(data) {
         // Expects already filtered data for scales
@@ -472,20 +628,21 @@ class AXLineChartComponent extends AXChartComponent {
         }
         const allNumericX = allDataPoints.every((d) => typeof d.x === 'number');
         if (allNumericX) {
+            this.xScaleKind = 'linear';
+            const xMin = this.d3.min(allDataPoints, (d) => d.x) ?? 0;
             const xMax = this.d3.max(allDataPoints, (d) => d.x) ?? 0;
-            if (xMax === 0) {
-                // If all values are 0, show -1 to 1 range
+            if (xMin === xMax) {
                 this.xScale = this.d3
                     .scaleLinear()
-                    .domain([-1, 1])
+                    .domain([xMin - 1, xMax + 1])
                     .range([0, this.width]);
             }
             else {
-                // Always start X axis from 0 for numeric data
-                this.xScale = this.d3.scaleLinear().domain([0, xMax]).range([0, this.width]);
+                this.xScale = this.d3.scaleLinear().domain([xMin, xMax]).range([0, this.width]);
             }
         }
         else {
+            this.xScaleKind = 'point';
             const xDomain = [];
             const seenX = new Set();
             for (const point of allDataPoints) {
@@ -496,40 +653,54 @@ class AXLineChartComponent extends AXChartComponent {
                 }
             }
             this.xScale = this.d3
-                .scaleBand()
+                .scalePoint()
                 .domain(xDomain)
                 .range([0, this.width])
-                .paddingInner(0.2)
-                .paddingOuter(0);
+                .padding(0);
         }
         const yAxisStartsAtZero = chartOptions.yAxisStartsAtZero !== false;
-        let yMin = this.d3.min(allDataPoints, (d) => d.y) ?? 0;
+        const dataYMin = this.d3.min(allDataPoints, (d) => d.y) ?? 0;
+        const dataYMax = this.d3.max(allDataPoints, (d) => d.y) ?? 0;
+        let yMin;
+        let yMax;
         if (yAxisStartsAtZero) {
-            yMin = Math.min(0, yMin);
+            yMin = Math.min(0, dataYMin);
+            yMax = Math.max(0, dataYMax);
+        }
+        else {
+            yMin = dataYMin;
+            yMax = dataYMax;
         }
-        const yMax = this.d3.max(allDataPoints, (d) => d.y) ?? 0;
-        const yRange = yMax - yMin;
+        const yRange = yMax - yMin || 1;
         this.yScale = this.d3
             .scaleLinear()
             .domain([yMin, yMax + yRange * paddingMultiplier])
             .nice()
             .range([this.height, 0]);
+        if (yAxisStartsAtZero && dataYMin >= 0) {
+            this.yScale.domain([0, this.yScale.domain()[1]]);
+        }
     }
     createAxes(options) {
         const showXAxis = options.showXAxis !== false;
         const showYAxis = options.showYAxis !== false;
         const showGrid = options.showGrid !== false;
-        const isBandScale = this.xScale.bandwidth !== undefined;
+        const isPointScale = this.xScaleKind === 'point';
+        const pointScale = isPointScale ? this.xScale : null;
         const isRtl = document.documentElement.dir === 'rtl' || document.body.dir === 'rtl';
         const axesGroup = this.chart.append('g').attr('class', 'ax-line-chart-axes');
         if (showXAxis) {
             let xAxisGenerator;
             let itemCount = 0;
-            if (isBandScale) {
-                // Band scale (categorical data)
-                itemCount = this.xScale.domain().length;
+            if (isPointScale && pointScale) {
+                itemCount = pointScale.domain().length;
+                const pointLayout = this.resolveXAxisLabelLayout(this.width, pointScale.domain());
+                this.xAxisLabelLayout.fontSize = pointLayout.fontSize;
+                this.xAxisLabelLayout.willRotate = pointLayout.willRotate;
+                this.xAxisLabelLayout.tickAreaHeight = pointLayout.tickAreaHeight;
+                this.xAxisLabelLayout.displayedTickCount = pointLayout.displayedTickCount;
                 // Smart tick reduction for many items (like bar chart)
-                let tickValues = this.xScale.domain();
+                let tickValues = pointScale.domain();
                 if (itemCount > this.VERY_MANY_ITEMS_THRESHOLD) {
                     // Show every 5th tick for 50+ items
                     tickValues = tickValues.filter((_d, i) => i % 5 === 0);
@@ -539,7 +710,7 @@ class AXLineChartComponent extends AXChartComponent {
                     tickValues = tickValues.filter((_d, i) => i % 2 === 0);
                 }
                 xAxisGenerator = this.d3
-                    .axisBottom(this.xScale)
+                    .axisBottom(pointScale)
                     .tickValues(tickValues)
                     .tickSize(5)
                     .tickPadding(8)
@@ -582,21 +753,17 @@ class AXLineChartComponent extends AXChartComponent {
                 .attr('stroke', 'rgba(var(--ax-comp-line-chart-grid-lines-color), 0.2)')
                 .attr('stroke-dasharray', '2,2')
                 .attr('stroke-opacity', '0.5');
-            const dynamicXAxisTickFontSize = this.calculateDynamicFontSize(this.width, 45, this.MIN_FONT_SIZE_X, this.MAX_FONT_SIZE_X);
+            const dynamicXAxisTickFontSize = isPointScale
+                ? this.xAxisLabelLayout.fontSize
+                : this.getXAxisTickFontSize(this.width, itemCount);
             const xAxisTicks = this.xAxis
                 .selectAll('text')
                 .style('font-size', `${dynamicXAxisTickFontSize}px`)
                 .style('font-weight', '400')
-                .style('fill', 'rgba(var(--ax-comp-line-chart-labels-color), 0.7)');
-            // Automatically rotate labels if they are likely to overlap (only for band scale)
-            let labelsAreRotated = false;
-            if (isBandScale && this.xScale.bandwidth && this.xScale.domain().length > 0) {
-                const step = this.xScale.step();
-                const longestLabel = this.xScale.domain().reduce((a, b) => (a.length > b.length ? a : b), '');
-                // Using char width ratio constant for better estimate
-                const estimatedLongestLabelWidth = longestLabel.length * dynamicXAxisTickFontSize * this.CHAR_WIDTH_RATIO;
-                if (estimatedLongestLabelWidth > step) {
-                    labelsAreRotated = true;
+                .style('fill', 'rgba(var(--ax-comp-line-chart-labels-color), 0.7)')
+                .attr('direction', 'ltr');
+            if (isPointScale && pointScale && pointScale.domain().length > 0) {
+                if (this.xAxisLabelLayout.willRotate) {
                     xAxisTicks
                         .attr('transform', 'rotate(-45)')
                         .style('text-anchor', 'end')
@@ -604,24 +771,9 @@ class AXLineChartComponent extends AXChartComponent {
                         .attr('dy', '0.15em');
                 }
             }
-            // Only show X-axis title if labels are NOT rotated and item count is reasonable
-            // This prevents overlap with rotated labels and improves readability
-            const shouldShowXAxisTitle = options.xAxisLabel && !labelsAreRotated && itemCount <= this.MANY_ITEMS_THRESHOLD;
-            if (shouldShowXAxisTitle) {
-                axesGroup
-                    .append('text')
-                    .attr('class', 'ax-line-chart-axis-label ax-x-axis-label')
-                    .attr('text-anchor', 'middle')
-                    .attr('x', this.width / 2)
-                    .attr('y', this.height + this.margin.bottom - 5)
-                    .attr('direction', 'ltr')
-                    .attr('style', `
-            font-size: 14px;
-            font-weight: 500;
-            fill: rgb(var(--ax-comp-line-chart-text-color));
-            pointer-events: none;
-          `)
-                    .text(options.xAxisLabel);
+            const xTickAreaHeight = this.measureXAxisTickAreaHeight(this.xAxis.node(), dynamicXAxisTickFontSize, this.xAxisLabelLayout.tickAreaHeight);
+            if (options.xAxisLabel) {
+                this.createXAxisTitle(axesGroup, options.xAxisLabel, xTickAreaHeight, dynamicXAxisTickFontSize);
             }
         }
         if (showYAxis) {
@@ -650,7 +802,7 @@ class AXLineChartComponent extends AXChartComponent {
                 .attr('stroke', 'rgba(var(--ax-comp-line-chart-grid-lines-color), 0.2)')
                 .attr('stroke-dasharray', '2,2')
                 .attr('stroke-opacity', '0.5');
-            const dynamicYAxisTickFontSize = this.calculateDynamicFontSize(this.height, 30, this.MIN_FONT_SIZE_Y, this.MAX_FONT_SIZE_Y);
+            const dynamicYAxisTickFontSize = this.getYAxisTickFontSize(this.height);
             const yTickTexts = this.yAxis.selectAll('text').attr('style', `
           font-size: ${dynamicYAxisTickFontSize}px;
           font-weight: 400;
@@ -659,31 +811,13 @@ class AXLineChartComponent extends AXChartComponent {
             if (isRtl) {
                 yTickTexts.attr('text-anchor', 'start');
             }
+            else {
+                yTickTexts.attr('text-anchor', 'end').attr('direction', 'ltr');
+            }
+            const yTickNodes = (yTickTexts.nodes() || []);
+            const maxTickLabelWidth = this.measureMaxYAxisTickLabelWidth(yTickNodes, dynamicYAxisTickFontSize);
             if (options.yAxisLabel) {
-                // Calculate proper position for Y-axis title
-                // Position it to the left of the tick labels with proper spacing
-                const maxTickLabelWidth = this.calculateMaxYAxisTickLabelWidth();
-                const padding = this.Y_AXIS_PADDING;
-                // Position title to the left of the tick labels
-                const labelY = -maxTickLabelWidth - padding;
-                // Center the title vertically
-                const labelX = -this.height / 2;
-                axesGroup
-                    .append('text')
-                    .attr('class', 'ax-line-chart-axis-label ax-y-axis-label')
-                    .attr('text-anchor', 'middle')
-                    .attr('dominant-baseline', 'middle')
-                    .attr('transform', 'rotate(-90)')
-                    .attr('x', labelX)
-                    .attr('y', labelY)
-                    .attr('direction', 'ltr')
-                    .attr('style', `
-            font-size: 14px;
-            font-weight: 500;
-            fill: rgb(var(--ax-comp-line-chart-text-color));
-            pointer-events: none;
-          `)
-                    .text(options.yAxisLabel);
+                this.createYAxisTitle(axesGroup, options.yAxisLabel, dynamicYAxisTickFontSize, maxTickLabelWidth);
             }
         }
         if (showGrid) {
@@ -716,7 +850,7 @@ class AXLineChartComponent extends AXChartComponent {
                     .axisBottom(this.xScale)
                     .tickSize(-this.height)
                     .tickFormat(() => '')
-                    .tickValues(isBandScale ? undefined : this.xScale.ticks()));
+                    .tickValues(isPointScale ? undefined : this.xScale.ticks()));
                 // Style the vertical grid path and lines
                 xGrid.selectAll('path').attr('stroke-width', '0');
                 xGrid
@@ -728,16 +862,14 @@ class AXLineChartComponent extends AXChartComponent {
             }
         }
     }
+    getXPosition(point) {
+        if (this.xScaleKind === 'point') {
+            return this.xScale(String(point.x)) ?? 0;
+        }
+        return this.xScale(point.x);
+    }
     renderLines(allSeriesData) {
-        const isBandScale = this.xScale.bandwidth !== undefined;
-        const getX = (d) => {
-            if (isBandScale) {
-                return this.xScale(String(d.x)) + this.xScale.bandwidth() / 2;
-            }
-            else {
-                return this.xScale(d.x);
-            }
-        };
+        const getX = (d) => this.getXPosition(d);
         const lineGenerator = this.d3
             .line()
             .x(getX)
@@ -1024,14 +1156,7 @@ class AXLineChartComponent extends AXChartComponent {
         }
     }
     showCrosshairLines(dataPoint) {
-        const isBandScale = this.xScale.bandwidth !== undefined;
-        let x;
-        if (isBandScale) {
-            x = this.xScale(String(dataPoint.x)) + this.xScale.bandwidth() / 2;
-        }
-        else {
-            x = this.xScale(dataPoint.x);
-        }
+        const x = this.getXPosition(dataPoint);
         const y = this.yScale(dataPoint.y);
         let crosshairGroup = this.chart.select('.ax-line-chart-crosshair');
         if (crosshairGroup.empty()) {
@@ -1191,11 +1316,11 @@ class AXLineChartComponent extends AXChartComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXLineChartComponent, isStandalone: true, selector: "ax-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-line-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: 0, 0, 0, 0;--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;flex-shrink:0}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}ax-line-chart .ax-line-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-help{font-size:.8rem;opacity:.6}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXLineChartComponent, isStandalone: true, selector: "ax-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-line-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: 0, 0, 0, 0;--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;box-sizing:border-box;padding:clamp(.25rem,.6vw,.5rem);border-radius:.5rem;overflow:hidden;contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;flex-shrink:0}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}ax-line-chart .ax-line-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-help{font-size:.8rem;opacity:.6}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXLineChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-line-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-line-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: 0, 0, 0, 0;--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;flex-shrink:0}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}ax-line-chart .ax-line-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
+            args: [{ selector: 'ax-line-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-line-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: 0, 0, 0, 0;--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;box-sizing:border-box;padding:clamp(.25rem,.6vw,.5rem);border-radius:.5rem;overflow:hidden;contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;flex-shrink:0}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}ax-line-chart .ax-line-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
         }] });
 
 /**