@acorex/charts 21.0.0-next.13 → 21.0.0-next.15

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

@@ -1,4 +1,4 @@
-import { AXChartComponent, AX_CHART_COLOR_PALETTE, getChartColor, computeTooltipPosition } from '@acorex/charts';
+import { AXChartComponent, AX_CHART_COLOR_PALETTE, formatLargeNumber, getChartColor, getEasingFunction, computeTooltipPosition } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import * as i0 from '@angular/core';
 import { InjectionToken, input, output, viewChild, signal, inject, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
@@ -105,22 +105,124 @@ class AXLineChartComponent extends AXChartComponent {
             ...this.effectiveOptions().messages,
         };
     }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
-    // Tooltip gap in pixels for consistent spacing
+    // 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;
+    // Styling & Visual
+    DEFAULT_LINE_WIDTH = 2;
+    DEFAULT_POINT_RADIUS = 4;
+    DEFAULT_FILL_OPACITY = 20;
+    LINE_HIGHLIGHT_MULTIPLIER = 1.5;
+    POINT_HIGHLIGHT_MULTIPLIER = 1.5;
+    POINT_STROKE_WIDTH = 1;
+    POINT_HOVER_STROKE_WIDTH = 2;
+    GRID_DASH_ARRAY = '2,2';
+    CROSSHAIR_DASH_ARRAY = '3,3';
+    CROSSHAIR_OPACITY = 0.7;
+    // Animation
+    HOVER_TRANSITION_DURATION = 150;
+    ANIMATION_END_BUFFER = 100;
+    POINT_ANIMATION_DELAY_MS = 50;
+    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_Y = 11;
+    MAX_FONT_SIZE_Y = 15;
+    FONT_PADDING = 10;
+    Y_AXIS_PADDING = 10;
+    // Data & Performance
+    MAX_POINTS_TO_RENDER = 100;
+    POINT_COORDINATE_PRECISION = 10;
+    MANY_ITEMS_THRESHOLD = 20;
+    VERY_MANY_ITEMS_THRESHOLD = 50;
+    // Tooltip
     TOOLTIP_GAP = 10;
-    ngOnInit() {
-        this.loadD3();
-    }
-    #effect = effect(() => {
-        const rawData = this.data();
+    /**
+     * Normalizes input data to consistent array format with originalIndex
+     */
+    normalizeData(rawData) {
         if (Array.isArray(rawData)) {
-            this._fullNormalizedData = rawData.map((s, i) => ({ ...s, originalIndex: i }));
+            return rawData.map((s, i) => ({ ...s, originalIndex: i }));
         }
-        else if (rawData && 'data' in rawData) {
-            this._fullNormalizedData = [{ ...rawData, originalIndex: 0 }];
+        if (rawData && 'data' in rawData) {
+            return [{ ...rawData, originalIndex: 0 }];
         }
-        else {
-            this._fullNormalizedData = [];
+        return [];
+    }
+    /**
+     * Gets unique identifier for a series
+     */
+    getSeriesIdentifier(series) {
+        return series.id || series.label || `series-${series.originalIndex}`;
+    }
+    /**
+     * Calculates dynamic font size based on available space
+     */
+    calculateDynamicFontSize(dimension, divisor, min, max) {
+        return Math.max(min, Math.min(max, Math.round(dimension / divisor)));
+    }
+    /**
+     * Creates a unique key for point coordinates (for overlap detection)
+     */
+    createPointKey(x, y) {
+        const precision = this.POINT_COORDINATE_PRECISION;
+        return `${Math.round(x * precision) / precision},${Math.round(y * precision) / precision}`;
+    }
+    /**
+     * Removes series elements from the chart
+     */
+    removeSeriesElements(seriesIdentifier) {
+        this.chart.selectAll(`.ax-line-chart-series[data-series-identifier="${seriesIdentifier}"]`).remove();
+        this.chart.selectAll(`.ax-line-chart-points[data-series-identifier="${seriesIdentifier}"]`).remove();
+    }
+    /**
+     * Truncates long labels with ellipsis
+     */
+    truncateLabel(label, maxLength = this.MAX_LABEL_LENGTH) {
+        if (label.length <= maxLength)
+            return label;
+        return label.substring(0, maxLength - 1) + '…';
+    }
+    /**
+     * Calculates maximum width needed for Y-axis tick labels
+     */
+    calculateMaxYAxisTickLabelWidth() {
+        const allSeriesData = this._fullNormalizedData.filter((s) => !this.hiddenSeries.has(this.getSeriesIdentifier(s)));
+        let maxValue = 0;
+        let minValue = 0;
+        for (const series of allSeriesData) {
+            if (series.data && series.data.length > 0) {
+                for (const point of series.data) {
+                    if (typeof point.y === 'number') {
+                        maxValue = Math.max(maxValue, point.y);
+                        minValue = Math.min(minValue, point.y);
+                    }
+                }
+            }
         }
+        // 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;
+    }
+    ngOnInit() {
+        this.loadD3();
+    }
+    #effect = effect(() => {
+        this._fullNormalizedData = this.normalizeData(this.data());
         this.effectiveOptions();
         if (this._rendered()) {
             this.updateChart();
@@ -142,14 +244,15 @@ class AXLineChartComponent extends AXChartComponent {
             return sum + series.data.reduce((sSum, p) => sSum + p.y, 0);
         }, 0);
         return this._fullNormalizedData.map((series) => {
+            const seriesIdentifier = this.getSeriesIdentifier(series);
             const seriesSum = series.data.reduce((sum, p) => sum + p.y, 0);
             const percentage = totalSum > 0 ? (seriesSum / totalSum) * 100 : 0;
             return {
-                id: series.id || series.label || `series-${series.originalIndex}`,
+                id: seriesIdentifier,
                 name: series.label || `Series ${series.originalIndex + 1}`,
                 value: seriesSum,
                 color: series.lineColor || getChartColor(series.originalIndex, this.chartColors),
-                hidden: this.hiddenSeries.has(series.id || series.label || `series-${series.originalIndex}`),
+                hidden: this.hiddenSeries.has(seriesIdentifier),
                 percentage: parseFloat(percentage.toFixed(2)),
             };
         });
@@ -164,11 +267,11 @@ class AXLineChartComponent extends AXChartComponent {
             allPointsGroups.classed('ax-chart-dimmed', false).style('opacity', 1);
             allSeriesGroups
                 .selectAll('.ax-line-chart-line')
-                .attr('stroke-width', this.effectiveOptions().lineWidth ?? 2)
+                .attr('stroke-width', this.effectiveOptions().lineWidth ?? this.DEFAULT_LINE_WIDTH)
                 .classed('ax-chart-highlighted-path', false);
             allPointsGroups
                 .selectAll('circle.ax-line-chart-point')
-                .attr('r', this.effectiveOptions().pointRadius ?? 4)
+                .attr('r', this.effectiveOptions().pointRadius ?? this.DEFAULT_POINT_RADIUS)
                 .classed('ax-chart-highlighted-point', false);
             return;
         }
@@ -180,23 +283,22 @@ class AXLineChartComponent extends AXChartComponent {
         targetPointsGroup.classed('ax-chart-dimmed', false).style('opacity', 1);
         targetSeriesGroup
             .selectAll('.ax-line-chart-line')
-            .attr('stroke-width', (this.effectiveOptions().lineWidth ?? 2) * 1.5)
+            .attr('stroke-width', (this.effectiveOptions().lineWidth ?? this.DEFAULT_LINE_WIDTH) * this.LINE_HIGHLIGHT_MULTIPLIER)
             .classed('ax-chart-highlighted-path', true);
         targetPointsGroup
             .selectAll('circle.ax-line-chart-point')
-            .attr('r', (this.effectiveOptions().pointRadius ?? 4) * 1.5)
-            .classed('ax-chart-highlighted-point', true);
+            .attr('r', (this.effectiveOptions().pointRadius ?? this.DEFAULT_POINT_RADIUS) * this.POINT_HIGHLIGHT_MULTIPLIER)
+            .classed('ax-chart-highlighted-path', true);
     }
     toggleSegment(id) {
-        const seriesId = id;
-        if (this.hiddenSeries.has(seriesId)) {
-            this.hiddenSeries.delete(seriesId);
+        if (this.hiddenSeries.has(id)) {
+            this.hiddenSeries.delete(id);
         }
         else {
-            this.hiddenSeries.add(seriesId);
+            this.hiddenSeries.add(id);
         }
         this.updateChart();
-        return !this.hiddenSeries.has(seriesId);
+        return !this.hiddenSeries.has(id);
     }
     async loadD3() {
         try {
@@ -224,7 +326,7 @@ class AXLineChartComponent extends AXChartComponent {
             this.showNoDataMessage(containerElement);
             return;
         }
-        const visibleDataForRendering = allSeriesData.filter((series) => !this.hiddenSeries.has(series.id || series.label || `series-${series.originalIndex}`));
+        const visibleDataForRendering = allSeriesData.filter((series) => !this.hiddenSeries.has(this.getSeriesIdentifier(series)));
         if (visibleDataForRendering.length === 0) {
             // All data is present, but all series are hidden by the legend
             this.showAllSeriesHiddenMessage(containerElement);
@@ -232,17 +334,11 @@ class AXLineChartComponent extends AXChartComponent {
             // For now, we will show the message and return, as scales/axes can't be drawn.
             return;
         }
-        // Scales should be based on potentially visible data to avoid errors with empty domains
-        // If all are hidden, scales might become an issue. Let's use all data for scales,
-        // and rendering will handle visibility.
-        const dataForScales = allSeriesData.flatMap((s) => s.data).length > 0 ? allSeriesData : [{ data: [{ x: 0, y: 0 }] }];
         const chartOptions = this.effectiveOptions();
         this.setupDimensions(containerElement, chartOptions);
-        // Use allSeriesData for domain calculation to keep scales consistent even if some series are hidden
-        // but filter out series with no data points for scale calculation.
+        // Use allSeriesData for domain calculation to keep scales consistent
         const dataForScaleSetup = allSeriesData.filter((s) => s.data && s.data.length > 0);
         if (dataForScaleSetup.length === 0) {
-            // If after filtering, there's no data with points (e.g. all series have empty data arrays)
             this.showNoDataMessage(containerElement);
             return;
         }
@@ -265,7 +361,7 @@ class AXLineChartComponent extends AXChartComponent {
         this.calculateMargins(options, containerElement.clientWidth);
         const containerWidth = containerElement.clientWidth;
         const containerHeight = containerElement.clientHeight;
-        const minDim = Math.min(200, containerWidth, containerHeight);
+        const minDim = Math.min(this.MIN_CONTAINER_DIMENSION, 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;
@@ -274,8 +370,8 @@ class AXLineChartComponent extends AXChartComponent {
             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 = Math.max(this.width, 100);
-        this.height = Math.max(this.height, 100);
+        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 svg = this.d3
@@ -297,16 +393,16 @@ class AXLineChartComponent extends AXChartComponent {
     }
     calculateMargins(options, containerWidth) {
         this.margin = {
-            top: options.margins?.top ?? 20,
-            right: options.margins?.right ?? 25,
-            bottom: options.margins?.bottom ?? 40,
-            left: options.margins?.left ?? 50,
+            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 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(s.id || s.label || `series-${s.originalIndex}`));
+                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) {
@@ -315,11 +411,16 @@ class AXLineChartComponent extends AXChartComponent {
                         const availableWidthPerLabel = workingWidth / labelCount;
                         const labels = Array.from(allXValues);
                         const longestLabel = labels.reduce((a, b) => (a.length > b.length ? a : b), '');
-                        const estimatedFontSize = Math.max(11, Math.min(15, Math.round(workingWidth / 45)));
-                        const estimatedLongestLabelWidth = longestLabel.length * estimatedFontSize * 0.6;
+                        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) {
-                            const requiredExtraMargin = estimatedLongestLabelWidth * Math.sin(Math.PI / 4) + 10;
-                            this.margin.bottom += Math.min(60, requiredExtraMargin);
+                            // 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);
                         }
                     }
                 }
@@ -331,15 +432,23 @@ class AXLineChartComponent extends AXChartComponent {
             this.margin.bottom = Math.max(this.margin.bottom, 40 + extraBottomMargin);
         }
         if (options.yAxisLabel) {
-            const yLabelLength = options.yAxisLabel.length;
-            const extraLeftMargin = Math.min(20, Math.max(10, yLabelLength * 0.8));
-            this.margin.left = Math.max(this.margin.left, 50 + extraLeftMargin);
+            // 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, 45);
+            this.margin.bottom = Math.max(this.margin.bottom, this.MIN_MARGIN_BOTTOM);
         }
         if (options.showYAxis !== false) {
-            this.margin.left = Math.max(this.margin.left, 55);
+            this.margin.left = Math.max(this.margin.left, this.MIN_MARGIN_LEFT);
         }
     }
     setupScales(data) {
@@ -355,16 +464,17 @@ class AXLineChartComponent extends AXChartComponent {
         }
         const allNumericX = allDataPoints.every((d) => typeof d.x === 'number');
         if (allNumericX) {
-            const xMin = this.d3.min(allDataPoints, (d) => d.x) ?? 0;
             const xMax = this.d3.max(allDataPoints, (d) => d.x) ?? 0;
-            if (xMin === xMax) {
+            if (xMax === 0) {
+                // If all values are 0, show -1 to 1 range
                 this.xScale = this.d3
                     .scaleLinear()
-                    .domain([xMin - 1, xMax + 1])
+                    .domain([-1, 1])
                     .range([0, this.width]);
             }
             else {
-                this.xScale = this.d3.scaleLinear().domain([xMin, xMax]).range([0, this.width]);
+                // Always start X axis from 0 for numeric data
+                this.xScale = this.d3.scaleLinear().domain([0, xMax]).range([0, this.width]);
             }
         }
         else {
@@ -396,11 +506,58 @@ class AXLineChartComponent extends AXChartComponent {
         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;
+                // Smart tick reduction for many items (like bar chart)
+                let tickValues = this.xScale.domain();
+                if (itemCount > this.VERY_MANY_ITEMS_THRESHOLD) {
+                    // Show every 5th tick for 50+ items
+                    tickValues = tickValues.filter((_d, i) => i % 5 === 0);
+                }
+                else if (itemCount > this.MANY_ITEMS_THRESHOLD) {
+                    // Show every 2nd tick for 20-50 items
+                    tickValues = tickValues.filter((_d, i) => i % 2 === 0);
+                }
+                xAxisGenerator = this.d3
+                    .axisBottom(this.xScale)
+                    .tickValues(tickValues)
+                    .tickSize(5)
+                    .tickPadding(8)
+                    .tickFormat((d) => {
+                    const label = String(d);
+                    // Truncate long labels intelligently
+                    const maxLength = itemCount > this.MANY_ITEMS_THRESHOLD ? 10 : this.MAX_LABEL_LENGTH;
+                    return this.truncateLabel(label, maxLength);
+                });
+            }
+            else {
+                // Linear scale (numeric data)
+                // Let D3 determine optimal tick count, but ensure we show reasonable number
+                // Calculate optimal tick count based on width
+                const optimalTickCount = Math.min(12, Math.max(5, Math.floor(this.width / 80)));
+                xAxisGenerator = this.d3
+                    .axisBottom(this.xScale)
+                    .ticks(optimalTickCount)
+                    .tickSize(5)
+                    .tickPadding(8)
+                    .tickFormat((d) => {
+                    // Format numbers nicely
+                    const num = Number(d);
+                    if (Number.isInteger(num)) {
+                        return String(num);
+                    }
+                    return num.toFixed(1);
+                });
+                itemCount = optimalTickCount;
+            }
             this.xAxis = axesGroup
                 .append('g')
                 .attr('class', 'ax-line-chart-axis-x')
                 .attr('transform', `translate(0,${this.height})`)
-                .call(this.d3.axisBottom(this.xScale).tickSize(5).tickPadding(8));
+                .call(xAxisGenerator);
             // Style the x-axis path and lines
             this.xAxis.selectAll('path').attr('stroke', 'rgba(var(--ax-comp-line-chart-axis-color), 0.2)');
             this.xAxis
@@ -408,19 +565,21 @@ 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 = Math.max(11, Math.min(15, Math.round(this.width / 45)));
+            const dynamicXAxisTickFontSize = this.calculateDynamicFontSize(this.width, 45, this.MIN_FONT_SIZE_X, this.MAX_FONT_SIZE_X);
             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
-            if (isBandScale && this.xScale.domain().length > 0) {
+            // 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 0.6 as a better estimate for char width-to-height ratio
-                const estimatedLongestLabelWidth = longestLabel.length * dynamicXAxisTickFontSize * 0.6;
+                // Using char width ratio constant for better estimate
+                const estimatedLongestLabelWidth = longestLabel.length * dynamicXAxisTickFontSize * this.CHAR_WIDTH_RATIO;
                 if (estimatedLongestLabelWidth > step) {
+                    labelsAreRotated = true;
                     xAxisTicks
                         .attr('transform', 'rotate(-45)')
                         .style('text-anchor', 'end')
@@ -428,16 +587,17 @@ class AXLineChartComponent extends AXChartComponent {
                         .attr('dy', '0.15em');
                 }
             }
-            if (options.xAxisLabel) {
-                const labelY = this.height + this.margin.bottom * 0.7;
+            // 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('dominant-baseline', 'middle')
                     .attr('x', this.width / 2)
-                    .attr('y', labelY)
-                    .attr('transform', 'translate(0, 5)')
+                    .attr('y', this.height + this.margin.bottom - 5)
+                    .attr('direction', 'ltr')
                     .attr('style', `
             font-size: 14px;
             font-weight: 500;
@@ -448,10 +608,24 @@ class AXLineChartComponent extends AXChartComponent {
             }
         }
         if (showYAxis) {
-            this.yAxis = axesGroup
-                .append('g')
-                .attr('class', 'ax-line-chart-axis-y')
-                .call(this.d3.axisLeft(this.yScale).tickSize(5).tickPadding(8));
+            // Create Y axis with smart number formatting
+            const yAxisGenerator = this.d3
+                .axisLeft(this.yScale)
+                .tickSize(5)
+                .tickPadding(8)
+                .tickFormat((value) => {
+                const numValue = typeof value === 'number' ? value : value.valueOf();
+                return formatLargeNumber(numValue);
+            });
+            // Reduce tick count for better readability with large numbers
+            const maxValue = this.yScale.domain()[1];
+            if (maxValue > 1e6) {
+                yAxisGenerator.ticks(6); // Fewer ticks for millions+
+            }
+            else if (maxValue > 1e3) {
+                yAxisGenerator.ticks(8);
+            }
+            this.yAxis = axesGroup.append('g').attr('class', 'ax-line-chart-axis-y').call(yAxisGenerator);
             // Style the y-axis path and lines
             this.yAxis.selectAll('path').attr('stroke', 'rgba(var(--ax-comp-line-chart-axis-color), 0.2)');
             this.yAxis
@@ -459,7 +633,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 = Math.max(11, Math.min(15, Math.round(this.height / 30)));
+            const dynamicYAxisTickFontSize = this.calculateDynamicFontSize(this.height, 30, this.MIN_FONT_SIZE_Y, this.MAX_FONT_SIZE_Y);
             const yTickTexts = this.yAxis.selectAll('text').attr('style', `
           font-size: ${dynamicYAxisTickFontSize}px;
           font-weight: 400;
@@ -469,16 +643,23 @@ class AXLineChartComponent extends AXChartComponent {
                 yTickTexts.attr('text-anchor', 'start');
             }
             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;
-                const labelY = -this.margin.left * 0.8;
                 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) translate(-5, 0)')
+                    .attr('transform', 'rotate(-90)')
                     .attr('x', labelX)
                     .attr('y', labelY)
+                    .attr('direction', 'ltr')
                     .attr('style', `
             font-size: 14px;
             font-weight: 500;
@@ -568,12 +749,11 @@ class AXLineChartComponent extends AXChartComponent {
             this.chart.append('g').attr('class', 'ax-line-chart-crosshair').attr('pointer-events', 'none');
         }
         const animationDuration = this.effectiveOptions().animationDuration;
-        const animationEasing = this.getEasingFunction(this.effectiveOptions().animationEasing);
+        const animationEasing = getEasingFunction(this.d3, this.effectiveOptions().animationEasing);
         allSeriesData.forEach((series) => {
-            const seriesIdentifier = series.id || series.label || `series-${series.originalIndex}`;
+            const seriesIdentifier = this.getSeriesIdentifier(series);
             if (this.hiddenSeries.has(seriesIdentifier)) {
-                this.chart.selectAll(`.ax-line-chart-series[data-series-identifier="${seriesIdentifier}"]`).remove();
-                this.chart.selectAll(`.ax-line-chart-points[data-series-identifier="${seriesIdentifier}"]`).remove();
+                this.removeSeriesElements(seriesIdentifier);
                 return;
             }
             if (!series.data || series.data.length === 0)
@@ -590,7 +770,7 @@ class AXLineChartComponent extends AXChartComponent {
                 .datum(series.data)
                 .attr('class', 'ax-line-chart-line')
                 .attr('stroke', lineColor)
-                .attr('stroke-width', this.effectiveOptions().lineWidth ?? 2)
+                .attr('stroke-width', this.effectiveOptions().lineWidth ?? this.DEFAULT_LINE_WIDTH)
                 .attr('stroke-linejoin', 'round')
                 .attr('stroke-linecap', 'round')
                 .attr('d', lineGenerator)
@@ -601,14 +781,14 @@ class AXLineChartComponent extends AXChartComponent {
                 .on('mouseenter', () => {
                 line
                     .transition()
-                    .duration(150)
-                    .attr('stroke-width', (this.effectiveOptions().lineWidth ?? 2) * 1.5);
+                    .duration(this.HOVER_TRANSITION_DURATION)
+                    .attr('stroke-width', (this.effectiveOptions().lineWidth ?? this.DEFAULT_LINE_WIDTH) * this.LINE_HIGHLIGHT_MULTIPLIER);
             })
                 .on('mouseleave', () => {
                 line
                     .transition()
-                    .duration(150)
-                    .attr('stroke-width', this.effectiveOptions().lineWidth ?? 2);
+                    .duration(this.HOVER_TRANSITION_DURATION)
+                    .attr('stroke-width', this.effectiveOptions().lineWidth ?? this.DEFAULT_LINE_WIDTH);
             });
             const totalLength = line.node().getTotalLength();
             line
@@ -635,13 +815,13 @@ class AXLineChartComponent extends AXChartComponent {
                     .on('mouseenter', () => {
                     area
                         .transition()
-                        .duration(150)
+                        .duration(this.HOVER_TRANSITION_DURATION)
                         .attr('opacity', ((this.effectiveOptions().fillOpacity ?? 20) / 100) * 1.5);
                 })
                     .on('mouseleave', () => {
                     area
                         .transition()
-                        .duration(150)
+                        .duration(this.HOVER_TRANSITION_DURATION)
                         .attr('opacity', (this.effectiveOptions().fillOpacity ?? 20) / 100);
                 });
                 area
@@ -657,17 +837,15 @@ class AXLineChartComponent extends AXChartComponent {
         if (this.effectiveOptions().showPoints !== false) {
             const pointMap = new Map();
             allSeriesData.forEach((series) => {
-                const seriesIdentifier = series.id || series.label || `series-${series.originalIndex}`;
+                const seriesIdentifier = this.getSeriesIdentifier(series);
                 if (this.hiddenSeries.has(seriesIdentifier) || !series.data || series.data.length === 0) {
                     return;
                 }
-                const lineColor = series.lineColor || getChartColor(series.originalIndex, this.chartColors);
-                const maxPoints = 100;
-                const pointData = series.data.length > maxPoints ? this.getReducedDataPoints(series.data, maxPoints) : series.data;
+                const pointData = this.getReducedDataPoints(series.data, this.MAX_POINTS_TO_RENDER);
                 pointData.forEach((point) => {
                     const x = getX(point);
                     const y = this.yScale(point.y);
-                    const key = `${Math.round(x * 10) / 10},${Math.round(y * 10) / 10}`;
+                    const key = this.createPointKey(x, y);
                     if (!pointMap.has(key)) {
                         pointMap.set(key, []);
                     }
@@ -675,9 +853,9 @@ class AXLineChartComponent extends AXChartComponent {
                 });
             });
             let animationCounter = 0;
-            const totalVisibleSeriesCount = allSeriesData.filter((s) => !this.hiddenSeries.has(s.id || s.label || `series-${s.originalIndex}`) && s.data && s.data.length > 0).length;
+            const totalVisibleSeriesCount = allSeriesData.filter((s) => !this.hiddenSeries.has(this.getSeriesIdentifier(s)) && s.data && s.data.length > 0).length;
             allSeriesData.forEach((series) => {
-                const seriesIdentifier = series.id || series.label || `series-${series.originalIndex}`;
+                const seriesIdentifier = this.getSeriesIdentifier(series);
                 if (this.hiddenSeries.has(seriesIdentifier) || !series.data || series.data.length === 0) {
                     return;
                 }
@@ -688,10 +866,9 @@ class AXLineChartComponent extends AXChartComponent {
                     .attr('data-series-identifier', seriesIdentifier)
                     .attr('pointer-events', 'none');
                 pointsGroup
-                    .on('mouseenter', () => this.handlePointGroupEnter(series.originalIndex, lineColor))
+                    .on('mouseenter', () => this.handlePointGroupEnter(series.originalIndex))
                     .on('mouseleave', () => this.handlePointGroupLeave());
-                const maxPoints = 100;
-                const pointData = series.data.length > maxPoints ? this.getReducedDataPoints(series.data, maxPoints) : series.data;
+                const pointData = this.getReducedDataPoints(series.data, this.MAX_POINTS_TO_RENDER);
                 pointsGroup
                     .selectAll('circle')
                     .data(pointData)
@@ -711,7 +888,7 @@ class AXLineChartComponent extends AXChartComponent {
                     .on('mouseenter', (event, d) => {
                     const x = getX(d);
                     const y = this.yScale(d.y);
-                    const key = `${Math.round(x * 10) / 10},${Math.round(y * 10) / 10}`;
+                    const key = this.createPointKey(x, y);
                     const overlappingPoints = pointMap.get(key) || [];
                     if (overlappingPoints.length > 1) {
                         this.handleOverlappingPointsHover(event, overlappingPoints);
@@ -722,7 +899,7 @@ class AXLineChartComponent extends AXChartComponent {
                     this.d3
                         .select(event.target)
                         .transition()
-                        .duration(150)
+                        .duration(this.HOVER_TRANSITION_DURATION)
                         .attr('r', (this.effectiveOptions().pointRadius ?? 4) * 1.5)
                         .attr('stroke-width', 2)
                         .attr('stroke', `rgb(var(--ax-comp-line-chart-bg-color))`);
@@ -733,15 +910,15 @@ class AXLineChartComponent extends AXChartComponent {
                     this.d3
                         .select(event.target)
                         .transition()
-                        .duration(150)
-                        .attr('r', this.effectiveOptions().pointRadius ?? 4)
+                        .duration(this.HOVER_TRANSITION_DURATION)
+                        .attr('r', this.effectiveOptions().pointRadius ?? this.DEFAULT_POINT_RADIUS)
                         .attr('stroke-width', 1)
                         .attr('stroke', '#fff');
                 })
                     .on('click', (event, d) => {
                     const x = getX(d);
                     const y = this.yScale(d.y);
-                    const key = `${Math.round(x * 10) / 10},${Math.round(y * 10) / 10}`;
+                    const key = this.createPointKey(x, y);
                     const overlappingPoints = pointMap.get(key) || [];
                     if (overlappingPoints.length > 1) {
                         overlappingPoints.forEach(({ point, series }) => {
@@ -753,10 +930,11 @@ class AXLineChartComponent extends AXChartComponent {
                     }
                 })
                     .transition()
-                    .delay((d, i) => i * Math.min(50, (animationDuration || 0) * 0.05) + (animationDuration || 0) * 0.5)
-                    .duration((animationDuration || 0) * 0.3)
+                    .delay((_d, i) => i * Math.min(this.POINT_ANIMATION_DELAY_MS, (animationDuration || 0) * 0.05) +
+                    (animationDuration || 0) * this.POINT_ANIMATION_DELAY_RATIO)
+                    .duration((animationDuration || 0) * this.POINT_ANIMATION_DURATION_RATIO)
                     .ease(animationEasing)
-                    .attr('r', this.effectiveOptions().pointRadius ?? 4)
+                    .attr('r', this.effectiveOptions().pointRadius ?? this.DEFAULT_POINT_RADIUS)
                     .on('end', (d, i, nodes) => {
                     if (i === nodes.length - 1) {
                         animationCounter++;
@@ -768,9 +946,7 @@ class AXLineChartComponent extends AXChartComponent {
             });
         }
         else {
-            setTimeout(() => {
-                this.enablePointerEventsAfterAnimation();
-            }, animationDuration || 0 + 100);
+            setTimeout(() => this.enablePointerEventsAfterAnimation(), (animationDuration || 0) + this.ANIMATION_END_BUFFER);
         }
     }
     enablePointerEventsAfterAnimation() {
@@ -785,19 +961,19 @@ class AXLineChartComponent extends AXChartComponent {
         this.chart.selectAll('.ax-line-chart-point').attr('pointer-events', 'all');
         this.svg.classed('ax-line-chart-animating', false);
     }
-    handlePointGroupEnter(originalIndex, color) {
+    handlePointGroupEnter(originalIndex) {
         this.chart
             .select(`.ax-line-chart-series-${originalIndex} .ax-line-chart-line`)
             .transition()
-            .duration(150)
-            .attr('stroke-width', (this.effectiveOptions().lineWidth ?? 2) * 1.5);
+            .duration(this.HOVER_TRANSITION_DURATION)
+            .attr('stroke-width', (this.effectiveOptions().lineWidth ?? this.DEFAULT_LINE_WIDTH) * this.LINE_HIGHLIGHT_MULTIPLIER);
     }
     handlePointGroupLeave() {
         this.chart
             .selectAll('.ax-line-chart-line')
             .transition()
-            .duration(150)
-            .attr('stroke-width', this.effectiveOptions().lineWidth ?? 2);
+            .duration(this.HOVER_TRANSITION_DURATION)
+            .attr('stroke-width', this.effectiveOptions().lineWidth ?? this.DEFAULT_LINE_WIDTH);
         if (this.effectiveOptions().showCrosshair === true) {
             this.chart.select('.ax-line-chart-crosshair').selectAll('*').remove();
         }
@@ -820,7 +996,7 @@ class AXLineChartComponent extends AXChartComponent {
             const color = series.lineColor || getChartColor(originalIndex, this.chartColors);
             this._tooltipData.set({
                 title: dataPoint.tooltipLabel || series.tooltipLabel || series.label || `Series ${originalIndex + 1}`,
-                value: dataPoint.y.toString(),
+                value: formatLargeNumber(dataPoint.y),
                 color: color,
             });
             this._tooltipVisible.set(true);
@@ -964,7 +1140,7 @@ class AXLineChartComponent extends AXChartComponent {
             return;
         const tooltipData = {
             title: overlappingPoints.map(({ series }) => series.label),
-            value: overlappingPoints[0].point.y.toString(),
+            value: formatLargeNumber(overlappingPoints[0].point.y),
             color: overlappingPoints.map(({ series }) => series.lineColor || getChartColor(series.originalIndex, this.chartColors)),
         };
         this._tooltipData.set(tooltipData);
@@ -974,30 +1150,6 @@ class AXLineChartComponent extends AXChartComponent {
             this.showCrosshairLines(overlappingPoints[0].point);
         }
     }
-    getEasingFunction(easing) {
-        switch (easing) {
-            case 'linear':
-                return this.d3.easeLinear;
-            case 'ease':
-                return this.d3.easePolyInOut;
-            case 'ease-in':
-                return this.d3.easePolyIn;
-            case 'ease-out':
-                return this.d3.easePolyOut;
-            case 'ease-in-out':
-                return this.d3.easePolyInOut;
-            case 'cubic':
-                return this.d3.easeCubic;
-            case 'cubic-in':
-                return this.d3.easeCubicIn;
-            case 'cubic-out':
-                return this.d3.easeCubicOut;
-            case 'cubic-in-out':
-                return this.d3.easeCubicInOut;
-            default:
-                return this.d3.easeCubicOut;
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", 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:200px;--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;display:flex;align-items:center;justify-content:center;border-radius:.5rem;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{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}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 });
 }