@acorex/charts 20.1.25 → 20.1.26

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

@@ -17,6 +17,14 @@ const AXBarChartDefaultConfig = {
     cornerRadius: 4,
     animationDuration: 800,
     animationEasing: 'cubic-out',
+    messages: {
+        noData: 'No data available',
+        noDataHelp: 'Please provide data to display the chart',
+        allHidden: 'All bars are hidden',
+        allHiddenHelp: 'Click on legend items to show bars',
+        noDataIcon: 'fa-light fa-chart-column',
+        allHiddenIcon: 'fa-light fa-eye-slash',
+    },
 };
 const AX_BAR_CHART_CONFIG = new InjectionToken('AX_BAR_CHART_CONFIG', {
     providedIn: 'root',
@@ -94,6 +102,21 @@ class AXBarChartComponent extends NXComponent {
             ...this.options(),
         };
     }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
+    // Messages with defaults
+    effectiveMessages = computed(() => {
+        const defaultMessages = {
+            noData: 'No data available',
+            noDataHelp: 'Please provide data to display the chart',
+            allHidden: 'All bars are hidden',
+            allHiddenHelp: 'Click on legend items to show bars',
+            noDataIcon: 'fa-light fa-chart-column',
+            allHiddenIcon: 'fa-light fa-eye-slash',
+        };
+        return {
+            ...defaultMessages,
+            ...this.effectiveOptions().messages,
+        };
+    }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
     // Track hidden bars
     hiddenBars = new Set();
     // Track hidden series for clustered charts (by series label)
@@ -173,10 +196,7 @@ class AXBarChartComponent extends NXComponent {
             hasAnyVisible = visibleSingleData.length > 0;
         }
         // Clear existing chart SVG and messages (do not remove tooltip component)
-        this.d3
-            .select(containerElement)
-            .selectAll('svg, .ax-chart-message-container')
-            .remove();
+        this.d3.select(containerElement).selectAll('svg, .ax-chart-message-container').remove();
         // Early return if no data
         if (!inputValue.length) {
             this.showNoDataMessage(containerElement);
@@ -242,34 +262,39 @@ class AXBarChartComponent extends NXComponent {
             this.width = Math.max(containerWidth, minDim) - this.margin.left - this.margin.right;
             this.height = Math.max(containerHeight, minDim) - this.margin.top - this.margin.bottom;
         }
-        // Create responsive SVG that scales with its container
+        // Create responsive SVG with proper coordinate system
+        const totalWidth = this.width + this.margin.left + this.margin.right;
+        const totalHeight = this.height + this.margin.top + this.margin.bottom;
         const svg = this.d3
             .select(containerElement)
             .append('svg')
             .attr('width', '100%')
             .attr('height', '100%')
-            .attr('viewBox', `0 0 ${this.width + this.margin.left + this.margin.right} ${this.height + this.margin.top + this.margin.bottom}`)
+            .attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`)
             .attr('preserveAspectRatio', 'xMidYMid meet');
         this.svg = svg;
-        // Create chart group with margins
-        this.chart = this.svg.append('g').attr('transform', `translate(${this.margin.left},${this.margin.top})`);
+        // Create chart group positioned at margin offsets
+        this.chart = this.svg
+            .append('g')
+            .attr('class', 'chart-content')
+            .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
     }
     /**
      * Calculates chart margins based on options
      */
     calculateMargins(options, containerWidth) {
-        // Start with default margins
+        // Start with scientifically calculated base margins
         this.margin = {
             top: 20,
-            right: 20,
-            bottom: 30,
-            left: 40,
+            right: 25,
+            bottom: 40,
+            left: 60,
         };
         const raw = (this.data() || []);
         const isClustered = this.isClusteredData(raw);
         const barCount = isClustered
             ? raw.length
-            : (raw.filter((d) => !this.isBarHidden(d.id)).length);
+            : raw.filter((d) => !this.isBarHidden(d.id)).length;
         // Pre-emptively increase bottom margin if x-axis labels are likely to be rotated.
         // This is an estimation before scales and full dimensions are calculated.
         if (barCount > 0 && containerWidth > 0) {
@@ -285,29 +310,24 @@ class AXBarChartComponent extends NXComponent {
                     return visibleData.reduce((a, b) => (a.length > b.label.length ? a : b.label), '');
                 })();
                 // Estimate font size using the same logic as in createAxes, but with workingWidth.
-                const estimatedFontSize = Math.max(11, Math.min(15, Math.round(workingWidth / 45)));
-                // Estimate label width (using 0.6 as an average character width-to-height ratio).
-                const estimatedLongestLabelWidth = longestLabel.length * estimatedFontSize * 0.6;
+                const estimatedFontSize = Math.max(10, Math.min(14, Math.round(workingWidth / 50)));
+                // Estimate label width (using 0.65 as character width-to-height ratio for better Persian text support).
+                const estimatedLongestLabelWidth = longestLabel.length * estimatedFontSize * 0.65;
                 // If estimated label width is greater than the space available, rotation will occur.
                 if (estimatedLongestLabelWidth > availableWidthPerBar) {
                     // Add space for rotated labels. The height of the rotated label's bounding box
-                    // is roughly its length * sin(45 degrees). Add some padding.
-                    const requiredExtraMargin = estimatedLongestLabelWidth * Math.sin(Math.PI / 4) + 10;
-                    this.margin.bottom += Math.min(60, requiredExtraMargin); // Cap max extra margin.
+                    // is roughly its length * sin(45 degrees). Add extra padding for Persian text.
+                    const requiredExtraMargin = estimatedLongestLabelWidth * Math.sin(Math.PI / 4) + 20;
+                    this.margin.bottom += Math.min(100, requiredExtraMargin); // Increased cap for Persian text.
+                    // Also ensure minimum space for axis title if present
+                    if (options.xAxisLabel) {
+                        // Add substantial extra space for axis title when labels are rotated
+                        // Account for the increased spacing needed for rotated text bounding box
+                        this.margin.bottom += 30; // Further increased to match the positioning calculation
+                    }
                 }
             }
         }
-        // Adjust margins if axis labels are present
-        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, 30 + 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, 40 + extraLeftMargin);
-        }
         // Ensure enough left margin for Y-axis tick labels (avoid clipping large numbers)
         if (options.showYAxis !== false && barCount > 0) {
             const maxValue = (() => {
@@ -330,20 +350,24 @@ class AXBarChartComponent extends NXComponent {
             })();
             // Use a localized string to approximate default axis formatter (e.g., includes thousands separators)
             const exampleTickLabel = Number.isFinite(maxValue) ? maxValue.toLocaleString() : '00000';
-            // Approximate font size used in axis creation (fallback to 13px here since height isn't finalized yet)
-            const estimatedYAxisTickFontSize = 13;
-            // Estimate label width: characters * font size * average char width ratio + padding
-            const estimatedTickLabelWidth = exampleTickLabel.length * estimatedYAxisTickFontSize * 0.6 + 12;
             // Reserve additional space for tick mark and padding
-            this.margin.left = Math.max(this.margin.left, 45, Math.ceil(estimatedTickLabelWidth));
+            const maxYAxisLabelWidth = this.calculateMaxYAxisTickLabelWidth();
+            const baseYAxisSpace = 25; // Space for axis line and padding
+            const yAxisTitleSpace = options.yAxisLabel ? 35 : 0; // Space for Y-axis title if present
+            this.margin.left = Math.max(this.margin.left, maxYAxisLabelWidth + baseYAxisSpace + yAxisTitleSpace);
         }
-        // Ensure minimum margins for axes
+        // Ensure minimum margins meet scientific requirements
         if (options.showXAxis !== false) {
-            this.margin.bottom = Math.max(this.margin.bottom, 35);
+            this.margin.bottom = Math.max(this.margin.bottom, 40); // Minimum for X-axis
         }
         if (options.showYAxis !== false) {
-            this.margin.left = Math.max(this.margin.left, 45);
+            this.margin.left = Math.max(this.margin.left, 60); // Minimum for Y-axis
         }
+        // Ensure final margin integrity
+        this.margin.top = Math.max(this.margin.top, 20);
+        this.margin.right = Math.max(this.margin.right, 25);
+        this.margin.bottom = Math.max(this.margin.bottom, 40);
+        this.margin.left = Math.max(this.margin.left, 60);
     }
     /**
      * Creates x and y scales for the chart
@@ -380,11 +404,7 @@ class AXBarChartComponent extends NXComponent {
             .range([0, this.width])
             .padding(outerPadding);
         // Inner band for series
-        this.xSubScale = this.d3
-            .scaleBand()
-            .domain(visibleSeries)
-            .range([0, this.xScale.bandwidth()])
-            .padding(0.1);
+        this.xSubScale = this.d3.scaleBand().domain(visibleSeries).range([0, this.xScale.bandwidth()]).padding(0.1);
         // Y scale across all visible values
         const allVisibleValues = [];
         for (const g of groups) {
@@ -401,112 +421,178 @@ class AXBarChartComponent extends NXComponent {
      * Creates x and y axes with grid lines
      */
     createAxes(options) {
-        // Only create axes if they are enabled in options
         const showXAxis = options.showXAxis !== false;
         const showYAxis = options.showYAxis !== false;
         const showGrid = options.showGrid !== false;
-        // Create a group for all axes
         const axesGroup = this.chart.append('g').attr('class', 'ax-bar-chart-axes');
         if (showXAxis) {
-            // Build a map from id to label for tick formatting
-            const visibleDataForTicks = (this.data() || []).filter((d) => !this.isBarHidden(d.id));
-            const idToLabel = new Map(visibleDataForTicks.map((d) => [d.id, d.label]));
-            // Create X axis
-            this.xAxis = axesGroup
-                .append('g')
-                .attr('class', 'ax-bar-chart-axis-x')
-                .attr('transform', `translate(0,${this.height})`)
-                .call(this.d3.axisBottom(this.xScale).tickFormat((id) => idToLabel.get(id) ?? String(id)));
-            // Style the axis text
-            const dynamicXAxisTickFontSize = Math.max(11, Math.min(15, Math.round(this.width / 45)));
-            const xAxisTicks = this.xAxis
-                .selectAll('text')
-                .style('font-size', `${dynamicXAxisTickFontSize}px`)
-                .style('font-weight', '400')
-                .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)')
-                .attr('direction', 'ltr');
-            // Automatically rotate labels if they are likely to overlap
-            if (this.xScale.domain().length > 0) {
-                const step = this.xScale.step();
-                const labelsForRotation = Array.from(idToLabel.values());
-                const longestLabel = labelsForRotation.reduce((a, b) => (a.length > b.length ? a : b), '');
-                // Using 0.55 as a safer estimate for char width-to-height ratio
-                const estimatedLongestLabelWidth = longestLabel.length * dynamicXAxisTickFontSize * 0.55;
-                if (estimatedLongestLabelWidth > step) {
-                    xAxisTicks
-                        .attr('transform', 'rotate(-45)')
-                        .style('text-anchor', 'end')
-                        .attr('dx', '-0.8em')
-                        .attr('dy', '0.15em');
-                }
-            }
-            // Style all lines in the x-axis (path, ticks)
-            this.xAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
-            // Add X axis label if provided
-            if (options.xAxisLabel) {
-                const labelY = this.height + this.margin.bottom * 0.8;
-                axesGroup
-                    .append('text')
-                    .attr('class', 'ax-bar-chart-axis-label ax-x-axis-label')
-                    .attr('text-anchor', 'middle')
-                    .attr('dominant-baseline', 'middle')
-                    .attr('x', this.width / 2)
-                    .attr('y', labelY)
-                    .attr('direction', 'ltr')
-                    .style('font-size', '14px')
-                    .style('font-weight', '500')
-                    .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
-                    .text(options.xAxisLabel);
-            }
+            this.createXAxis(axesGroup, options);
         }
         if (showYAxis) {
-            // Create Y axis
-            this.yAxis = axesGroup.append('g').attr('class', 'ax-bar-chart-axis-y').call(this.d3.axisLeft(this.yScale));
-            // Style the axis text
-            const dynamicYAxisTickFontSize = Math.max(11, Math.min(15, Math.round(this.height / 30)));
-            this.yAxis
-                .selectAll('text')
-                .style('font-size', `${dynamicYAxisTickFontSize}px`)
-                .style('font-weight', '400')
-                .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)')
-                .attr('text-anchor', 'end')
-                .attr('direction', 'ltr');
-            // Style all lines in the y-axis (path, ticks)
-            this.yAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
-            // Add Y axis label if provided
-            if (options.yAxisLabel) {
-                const labelX = -this.height / 2;
-                const labelY = -this.margin.left * 0.8;
-                axesGroup
-                    .append('text')
-                    .attr('class', 'ax-bar-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')
-                    .style('font-size', '14px')
-                    .style('font-weight', '500')
-                    .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
-                    .text(options.yAxisLabel);
-            }
+            this.createYAxis(axesGroup, options);
         }
         if (showGrid) {
-            // Add horizontal grid lines
-            this.chart
-                .append('g')
-                .attr('class', 'ax-bar-chart-grid')
-                .call(this.d3
-                .axisLeft(this.yScale)
-                .tickSize(-this.width)
-                .tickFormat(() => ''))
-                .selectAll('line')
-                .style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))')
-                .style('stroke-opacity', 0.2);
-            // Remove unneeded elements from grid
-            this.chart.select('.ax-bar-chart-grid').selectAll('path, text').remove();
+            this.createGridLines();
+        }
+    }
+    createXAxis(axesGroup, options) {
+        // Build a map from id to label for tick formatting
+        const visibleDataForTicks = (this.data() || []).filter((d) => !this.isBarHidden(d.id));
+        const idToLabel = new Map(visibleDataForTicks.map((d) => [d.id, d.label]));
+        // Create X axis
+        this.xAxis = axesGroup
+            .append('g')
+            .attr('class', 'ax-bar-chart-axis-x')
+            .attr('transform', `translate(0,${this.height})`)
+            .call(this.d3.axisBottom(this.xScale).tickFormat((id) => idToLabel.get(id) ?? String(id)));
+        // Style the axis text - optimized font size for Persian text
+        const dynamicFontSize = Math.max(10, Math.min(14, Math.round(this.width / 50)));
+        const xAxisTicks = this.xAxis
+            .selectAll('text')
+            .style('font-size', `${dynamicFontSize}px`)
+            .style('font-weight', '400')
+            .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)')
+            .attr('direction', 'ltr');
+        // Handle label rotation for long Persian text
+        const isRotated = this.shouldRotateXAxisLabels(idToLabel, dynamicFontSize);
+        if (isRotated) {
+            xAxisTicks.attr('transform', 'rotate(-45)').style('text-anchor', 'end').attr('dx', '-0.8em').attr('dy', '0.15em');
+        }
+        // Style axis lines
+        this.xAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
+        // Add X axis title with proper spacing
+        if (options.xAxisLabel) {
+            this.createXAxisTitle(axesGroup, options.xAxisLabel, isRotated);
+        }
+    }
+    createYAxis(axesGroup, options) {
+        // Create Y axis
+        this.yAxis = axesGroup.append('g').attr('class', 'ax-bar-chart-axis-y').call(this.d3.axisLeft(this.yScale));
+        // Style the axis text
+        const dynamicFontSize = Math.max(11, Math.min(15, Math.round(this.height / 30)));
+        this.yAxis
+            .selectAll('text')
+            .style('font-size', `${dynamicFontSize}px`)
+            .style('font-weight', '400')
+            .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)')
+            .attr('text-anchor', 'end')
+            .attr('direction', 'ltr');
+        // Style axis lines
+        this.yAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
+        // Add Y axis title
+        if (options.yAxisLabel) {
+            this.createYAxisTitle(axesGroup, options.yAxisLabel);
+        }
+    }
+    shouldRotateXAxisLabels(idToLabel, fontSize) {
+        if (this.xScale.domain().length === 0)
+            return false;
+        const step = this.xScale.step();
+        const labels = Array.from(idToLabel.values());
+        const longestLabel = labels.reduce((a, b) => (a.length > b.length ? a : b), '');
+        const estimatedWidth = longestLabel.length * fontSize * 0.65; // Persian text ratio
+        return estimatedWidth > step;
+    }
+    createXAxisTitle(axesGroup, title, isRotated) {
+        // Calculate the exact position relative to the SVG coordinate system
+        // X-axis is positioned at Y = this.height within the chart group
+        // Chart group is translated by (margin.left, margin.top)
+        // So X-axis is at Y = margin.top + this.height in SVG coordinates
+        let titleOffset;
+        if (isRotated) {
+            // For 45° rotated text, we need to account for the diagonal bounding box
+            // The rotated text extends both horizontally and vertically from the baseline
+            const fontSize = 13; // Approximate font size for tick labels
+            const textLength = title.length;
+            // For 45° rotation, vertical extent = textLength * fontSize * sin(45°) + fontSize * cos(45°)
+            const verticalExtent = textLength * fontSize * 0.707 + fontSize * 0.707;
+            titleOffset = verticalExtent + 20; // Add padding
+        }
+        else {
+            // For horizontal text, account for font height + padding
+            const fontSize = 13; // Approximate font size for tick labels
+            titleOffset = fontSize + 12; // Font height + padding
         }
+        // Position the title below the X-axis line
+        const labelY = this.height + titleOffset;
+        axesGroup
+            .append('text')
+            .attr('class', 'ax-bar-chart-axis-label ax-x-axis-label')
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'hanging') // Align to top of text for better positioning
+            .attr('x', this.width / 2)
+            .attr('y', labelY)
+            .attr('direction', 'ltr')
+            .style('font-size', '14px')
+            .style('font-weight', '500')
+            .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
+            .text(title);
+    }
+    createYAxisTitle(axesGroup, title) {
+        // Calculate the exact position for Y-axis title
+        // Y-axis tick labels use text-anchor: end, so they extend LEFT of the Y-axis line
+        // Y-axis is at X = 0 within the chart group
+        // Chart group is translated by (margin.left, margin.top)
+        // So Y-axis is at X = margin.left in SVG coordinates
+        const maxTickLabelWidth = this.calculateMaxYAxisTickLabelWidth();
+        const padding = 15; // Padding between tick labels and axis title
+        // Position title to the left of the tick labels
+        // Since text-anchor: end aligns the text to the Y-axis, we need to go further left
+        const labelY = -maxTickLabelWidth - padding;
+        // Center the title vertically
+        const labelX = -this.height / 2;
+        axesGroup
+            .append('text')
+            .attr('class', 'ax-bar-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')
+            .style('font-size', '14px')
+            .style('font-weight', '500')
+            .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
+            .text(title);
+    }
+    calculateMaxYAxisTickLabelWidth() {
+        // Calculate the maximum width needed for Y-axis tick labels
+        const raw = (this.data() || []);
+        const isClustered = this.isClusteredData(raw);
+        let maxValue = 0;
+        if (isClustered) {
+            const groups = raw;
+            const seriesLabels = groups.length > 0 ? this.getClusterSeriesLabels(groups) : [];
+            const visibleSeries = seriesLabels.filter((s) => !this.hiddenSeries.has(s));
+            for (const g of groups) {
+                visibleSeries.forEach((_, idx) => {
+                    const item = g.chartData[idx];
+                    if (item && typeof item.value === 'number')
+                        maxValue = Math.max(maxValue, item.value);
+                });
+            }
+        }
+        else {
+            const visibleData = raw.filter((d) => !this.isBarHidden(d.id));
+            maxValue = visibleData.reduce((acc, d) => (d.value > acc ? d.value : acc), 0);
+        }
+        const tickLabelText = Number.isFinite(maxValue) ? maxValue.toLocaleString() : '00000';
+        const fontSize = 13; // Approximate font size for Y-axis tick labels
+        return tickLabelText.length * fontSize * 0.6 + 8; // Character width + padding
+    }
+    createGridLines() {
+        this.chart
+            .append('g')
+            .attr('class', 'ax-bar-chart-grid')
+            .call(this.d3
+            .axisLeft(this.yScale)
+            .tickSize(-this.width)
+            .tickFormat(() => ''))
+            .selectAll('line')
+            .style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))')
+            .style('stroke-opacity', 0.2);
+        // Remove unneeded elements from grid
+        this.chart.select('.ax-bar-chart-grid').selectAll('path, text').remove();
     }
     /**
      * Creates axes for clustered charts
@@ -517,83 +603,41 @@ class AXBarChartComponent extends NXComponent {
         const showGrid = options.showGrid !== false;
         const axesGroup = this.chart.append('g').attr('class', 'ax-bar-chart-axes');
         if (showXAxis) {
-            const idToLabel = new Map(groups.map((g) => [g.id, g.label]));
-            this.xAxis = axesGroup
-                .append('g')
-                .attr('class', 'ax-bar-chart-axis-x')
-                .attr('transform', `translate(0,${this.height})`)
-                .call(this.d3.axisBottom(this.xScale).tickFormat((id) => idToLabel.get(id) ?? String(id)));
-            const dynamicXAxisTickFontSize = Math.max(11, Math.min(15, Math.round(this.width / 45)));
-            const xAxisTicks = this.xAxis
-                .selectAll('text')
-                .style('font-size', `${dynamicXAxisTickFontSize}px`)
-                .style('font-weight', '400')
-                .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)')
-                .attr('direction', 'ltr');
-            if (this.xScale.domain().length > 0) {
-                const step = this.xScale.step();
-                const labelsForRotation = Array.from(idToLabel.values());
-                const longestLabel = labelsForRotation.reduce((a, b) => (a.length > b.length ? a : b), '');
-                const estimatedLongestLabelWidth = longestLabel.length * dynamicXAxisTickFontSize * 0.55;
-                if (estimatedLongestLabelWidth > step) {
-                    xAxisTicks.attr('transform', 'rotate(-45)').style('text-anchor', 'end').attr('dx', '-0.8em').attr('dy', '0.15em');
-                }
-            }
-            this.xAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
-            if (options.xAxisLabel) {
-                const labelY = this.height + this.margin.bottom * 0.8;
-                axesGroup
-                    .append('text')
-                    .attr('class', 'ax-bar-chart-axis-label ax-x-axis-label')
-                    .attr('text-anchor', 'middle')
-                    .attr('dominant-baseline', 'middle')
-                    .attr('x', this.width / 2)
-                    .attr('y', labelY)
-                    .attr('direction', 'ltr')
-                    .style('font-size', '14px')
-                    .style('font-weight', '500')
-                    .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
-                    .text(options.xAxisLabel);
-            }
+            this.createXAxisClustered(axesGroup, options, groups);
         }
         if (showYAxis) {
-            this.yAxis = axesGroup.append('g').attr('class', 'ax-bar-chart-axis-y').call(this.d3.axisLeft(this.yScale));
-            const dynamicYAxisTickFontSize = Math.max(11, Math.min(15, Math.round(this.height / 30)));
-            this.yAxis
-                .selectAll('text')
-                .style('font-size', `${dynamicYAxisTickFontSize}px`)
-                .style('font-weight', '400')
-                .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)')
-                .attr('text-anchor', 'end')
-                .attr('direction', 'ltr');
-            this.yAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
-            if (options.yAxisLabel) {
-                const labelX = -this.height / 2;
-                const labelY = -this.margin.left * 0.8;
-                axesGroup
-                    .append('text')
-                    .attr('class', 'ax-bar-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')
-                    .style('font-size', '14px')
-                    .style('font-weight', '500')
-                    .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
-                    .text(options.yAxisLabel);
-            }
+            this.createYAxis(axesGroup, options);
         }
         if (showGrid) {
-            this.chart
-                .append('g')
-                .attr('class', 'ax-bar-chart-grid')
-                .call(this.d3.axisLeft(this.yScale).tickSize(-this.width).tickFormat(() => ''))
-                .selectAll('line')
-                .style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))')
-                .style('stroke-opacity', 0.2);
-            this.chart.select('.ax-bar-chart-grid').selectAll('path, text').remove();
+            this.createGridLines();
+        }
+    }
+    createXAxisClustered(axesGroup, options, groups) {
+        const idToLabel = new Map(groups.map((g) => [g.id, g.label]));
+        // Create X axis
+        this.xAxis = axesGroup
+            .append('g')
+            .attr('class', 'ax-bar-chart-axis-x')
+            .attr('transform', `translate(0,${this.height})`)
+            .call(this.d3.axisBottom(this.xScale).tickFormat((id) => idToLabel.get(id) ?? String(id)));
+        // Style the axis text - optimized font size for Persian text
+        const dynamicFontSize = Math.max(10, Math.min(14, Math.round(this.width / 50)));
+        const xAxisTicks = this.xAxis
+            .selectAll('text')
+            .style('font-size', `${dynamicFontSize}px`)
+            .style('font-weight', '400')
+            .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)')
+            .attr('direction', 'ltr');
+        // Handle label rotation for long Persian text
+        const isRotated = this.shouldRotateXAxisLabels(idToLabel, dynamicFontSize);
+        if (isRotated) {
+            xAxisTicks.attr('transform', 'rotate(-45)').style('text-anchor', 'end').attr('dx', '-0.8em').attr('dy', '0.15em');
+        }
+        // Style axis lines
+        this.xAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
+        // Add X axis title with proper spacing
+        if (options.xAxisLabel) {
+            this.createXAxisTitle(axesGroup, options.xAxisLabel, isRotated);
         }
     }
     /**
@@ -622,14 +666,24 @@ class AXBarChartComponent extends NXComponent {
             .attr('class', 'ax-bar-chart-bar-group');
         // Add bars inside groups
         const bars = barGroups
-            .append('rect')
+            .append('path')
             .attr('class', 'ax-bar-chart-bar')
-            .attr('x', (d) => this.xScale(d.id))
-            .attr('width', this.xScale.bandwidth())
-            .attr('y', this.height) // Start from bottom for animation
-            .attr('height', 0) // Start with height 0 for animation
-            .attr('rx', radius) // Rounded corners
-            .attr('ry', radius) // Rounded corners
+            .attr('d', (d) => {
+            const x = this.xScale(d.id);
+            const width = this.xScale.bandwidth();
+            const y = this.height - 0.5; // Add small gap to prevent overlap with x-axis
+            const height = 0;
+            // Create path with only top corners rounded
+            if (radius > 0 && height > 0) {
+                const topY = y - height;
+                // Limit radius to prevent it from exceeding half the bar width
+                const effectiveRadius = Math.min(radius, width / 2);
+                return `M${x},${y} L${x},${topY + effectiveRadius} Q${x},${topY} ${x + effectiveRadius},${topY} L${x + width - effectiveRadius},${topY} Q${x + width},${topY} ${x + width},${topY + effectiveRadius} L${x + width},${y} Z`;
+            }
+            else {
+                return `M${x},${y} L${x},${y - height} L${x + width},${y - height} L${x + width},${y} Z`;
+            }
+        })
             .attr('fill', (d) => {
             // Find the index of the current bar (d) in the original data array
             const originalIndex = originalFullData.findIndex((item) => item.id === d.id);
@@ -666,7 +720,7 @@ class AXBarChartComponent extends NXComponent {
             // Only apply hover effects if initial animation is complete
             if (!this._initialAnimationComplete())
                 return;
-            const barEl = this.d3.select(event.currentTarget).select('rect');
+            const barEl = this.d3.select(event.currentTarget).select('path');
             // Standard hover effect - darken the bar slightly and add a subtle shadow
             barEl.transition().duration(150).style('filter', 'brightness(0.7) drop-shadow(0 0 2px rgba(0,0,0,0.1))');
             this.handleBarHover(event, d);
@@ -681,7 +735,7 @@ class AXBarChartComponent extends NXComponent {
             // Only apply hover effects if initial animation is complete
             if (!this._initialAnimationComplete())
                 return;
-            const barEl = this.d3.select(event.currentTarget).select('rect');
+            const barEl = this.d3.select(event.currentTarget).select('path');
             // Remove hover effect
             barEl.transition().duration(150).style('filter', null);
             this._tooltipVisible.set(false);
@@ -697,8 +751,24 @@ class AXBarChartComponent extends NXComponent {
             .transition()
             .duration(animationDuration)
             .delay((d, i) => i * 50) // Stagger each bar animation
-            .attr('y', (d) => this.yScale(d.value))
-            .attr('height', (d) => this.height - this.yScale(d.value))
+            .attrTween('d', (d) => {
+            const x = this.xScale(d.id);
+            const width = this.xScale.bandwidth();
+            const finalHeight = this.height - this.yScale(d.value);
+            return (t) => {
+                const currentHeight = finalHeight * t;
+                const currentY = this.height - currentHeight;
+                const bottomY = this.height - 0.5; // Add small gap to prevent overlap with x-axis
+                if (radius > 0 && currentHeight > 0) {
+                    // Limit radius to prevent it from exceeding half the bar width
+                    const effectiveRadius = Math.min(radius, width / 2);
+                    return `M${x},${bottomY} L${x},${currentY + effectiveRadius} Q${x},${currentY} ${x + effectiveRadius},${currentY} L${x + width - effectiveRadius},${currentY} Q${x + width},${currentY} ${x + width},${currentY + effectiveRadius} L${x + width},${bottomY} Z`;
+                }
+                else {
+                    return `M${x},${bottomY} L${x},${currentY} L${x + width},${currentY} L${x + width},${bottomY} Z`;
+                }
+            };
+        })
             .ease(animationEasing) // Use the configured easing function
             .end() // Wait for all animations to complete
             .then(() => {
@@ -732,15 +802,25 @@ class AXBarChartComponent extends NXComponent {
             .style('cursor', 'pointer')
             .attr('class', 'ax-bar-chart-bar-group');
         const bars = barGroups
-            .append('rect')
+            .append('path')
             .attr('class', 'ax-bar-chart-bar')
             .attr('data-series', (d) => d.seriesLabel)
-            .attr('x', (d) => this.xSubScale(d.seriesLabel))
-            .attr('width', this.xSubScale.bandwidth())
-            .attr('y', this.height)
-            .attr('height', 0)
-            .attr('rx', radius)
-            .attr('ry', radius)
+            .attr('d', (d) => {
+            const x = this.xSubScale(d.seriesLabel);
+            const width = this.xSubScale.bandwidth();
+            const y = this.height - 0.5; // Add small gap to prevent overlap with x-axis
+            const height = 0;
+            // Create path with only top corners rounded
+            if (radius > 0 && height > 0) {
+                const topY = y - height;
+                // Limit radius to prevent it from exceeding half the bar width
+                const effectiveRadius = Math.min(radius, width / 2);
+                return `M${x},${y} L${x},${topY + effectiveRadius} Q${x},${topY} ${x + effectiveRadius},${topY} L${x + width - effectiveRadius},${topY} Q${x + width},${topY} ${x + width},${topY + effectiveRadius} L${x + width},${y} Z`;
+            }
+            else {
+                return `M${x},${y} L${x},${y - height} L${x + width},${y - height} L${x + width},${y} Z`;
+            }
+        })
             .attr('fill', (d) => {
             const item = d.group.chartData[d.seriesIndex];
             const colorIndex = d.seriesIndex;
@@ -777,7 +857,7 @@ class AXBarChartComponent extends NXComponent {
             .on('mouseenter', (event, d) => {
             if (!this._initialAnimationComplete())
                 return;
-            const barEl = this.d3.select(event.currentTarget).select('rect');
+            const barEl = this.d3.select(event.currentTarget).select('path');
             barEl.transition().duration(150).style('filter', 'brightness(0.7) drop-shadow(0 0 2px rgba(0,0,0,0.1))');
             const item = d.group.chartData[d.seriesIndex];
             if (item)
@@ -790,7 +870,7 @@ class AXBarChartComponent extends NXComponent {
             .on('mouseleave', (event) => {
             if (!this._initialAnimationComplete())
                 return;
-            const barEl = this.d3.select(event.currentTarget).select('rect');
+            const barEl = this.d3.select(event.currentTarget).select('path');
             barEl.transition().duration(150).style('filter', null);
             this._tooltipVisible.set(false);
         })
@@ -805,13 +885,24 @@ class AXBarChartComponent extends NXComponent {
             .transition()
             .duration(animationDuration)
             .delay((_, i) => i * 50)
-            .attr('y', (d) => {
-            const item = d.group.chartData[d.seriesIndex];
-            return item ? this.yScale(item.value) : this.height;
-        })
-            .attr('height', (d) => {
+            .attrTween('d', (d) => {
+            const x = this.xSubScale(d.seriesLabel);
+            const width = this.xSubScale.bandwidth();
             const item = d.group.chartData[d.seriesIndex];
-            return item ? this.height - this.yScale(item.value) : 0;
+            const finalHeight = item ? this.height - this.yScale(item.value) : 0;
+            return (t) => {
+                const currentHeight = finalHeight * t;
+                const currentY = this.height - currentHeight;
+                const bottomY = this.height - 0.5; // Add small gap to prevent overlap with x-axis
+                if (radius > 0 && currentHeight > 0) {
+                    // Limit radius to prevent it from exceeding half the bar width
+                    const effectiveRadius = Math.min(radius, width / 2);
+                    return `M${x},${bottomY} L${x},${currentY + effectiveRadius} Q${x},${currentY} ${x + effectiveRadius},${currentY} L${x + width - effectiveRadius},${currentY} Q${x + width},${currentY} ${x + width},${currentY + effectiveRadius} L${x + width},${bottomY} Z`;
+                }
+                else {
+                    return `M${x},${bottomY} L${x},${currentY} L${x + width},${currentY} L${x + width},${bottomY} Z`;
+                }
+            };
         })
             .ease(animationEasing)
             .end()
@@ -853,7 +944,7 @@ class AXBarChartComponent extends NXComponent {
             const isClustered = this.isClusteredData(dataValue);
             const flatData = isClustered
                 ? dataValue.flatMap((g) => g.chartData)
-                : (dataValue || []);
+                : dataValue || [];
             const index = flatData.findIndex((item) => item.id === datum.id && item.label === datum.label);
             const color = datum.color || this.getColor(index !== -1 ? index : 0);
             // Calculate percentage of total
@@ -862,7 +953,7 @@ class AXBarChartComponent extends NXComponent {
                 : flatData.reduce((sum, item) => sum + item.value, 0);
             const percentage = total > 0 ? ((datum.value / total) * 100).toFixed(1) : '0';
             this._tooltipData.set({
-                title: group ? `${datum.tooltipLabel || datum.label} — ${group.label}` : (datum.tooltipLabel || datum.label),
+                title: group ? `${datum.tooltipLabel || datum.label} — ${group.label}` : datum.tooltipLabel || datum.label,
                 value: datum.value.toString(),
                 percentage: `${percentage}%`,
                 color: color,
@@ -917,19 +1008,19 @@ class AXBarChartComponent extends NXComponent {
             .append('div')
             // Apply generic icon class and specific bar chart icon class
             .attr('class', 'ax-chart-message-icon ax-bar-chart-no-data-icon')
-            .html('<i class="fa-light fa-chart-column fa-2x"></i>');
+            .html(`<i class="${this.effectiveMessages().noDataIcon} fa-2x"></i>`);
         // Add text message
         messageContainer
             .append('div')
             // Apply generic text class and specific bar chart text class
             .attr('class', 'ax-chart-message-text ax-bar-chart-no-data-text')
-            .text('No data available');
+            .text(this.effectiveMessages().noData);
         // Add help text
         messageContainer
             .append('div')
             // Apply generic help class and specific bar chart help class
             .attr('class', 'ax-chart-message-help ax-bar-chart-no-data-help')
-            .text('Please provide data to display the chart');
+            .text(this.effectiveMessages().noDataHelp);
     }
     /**
      * Shows a message when all bars are hidden
@@ -947,19 +1038,19 @@ class AXBarChartComponent extends NXComponent {
             .append('div')
             // Apply generic icon class and specific bar chart icon class
             .attr('class', 'ax-chart-message-icon ax-bar-chart-no-data-icon')
-            .html('<i class="fa-light fa-eye-slash fa-2x"></i>');
+            .html(`<i class="${this.effectiveMessages().allHiddenIcon} fa-2x"></i>`);
         // Add text message
         messageContainer
             .append('div')
             // Apply generic text class and specific bar chart text class
             .attr('class', 'ax-chart-message-text ax-bar-chart-no-data-text')
-            .text('All bars are hidden');
+            .text(this.effectiveMessages().allHidden);
         // Add help text
         messageContainer
             .append('div')
             // Apply generic help class and specific bar chart help class
             .attr('class', 'ax-chart-message-help ax-bar-chart-no-data-help')
-            .text('Click on legend items to show bars');
+            .text(this.effectiveMessages().allHiddenHelp);
     }
     /**
      * Gets the color for a bar based on its index
@@ -1111,7 +1202,10 @@ class AXBarChartComponent extends NXComponent {
                 this.hiddenBars.delete(id);
                 if (wasAllHidden) {
                     if (this.chartContainerEl()?.nativeElement) {
-                        this.d3?.select(this.chartContainerEl().nativeElement).selectAll('svg, .ax-chart-message-container').remove();
+                        this.d3
+                            ?.select(this.chartContainerEl().nativeElement)
+                            .selectAll('svg, .ax-chart-message-container')
+                            .remove();
                         setTimeout(() => {
                             this.createChart();
                         }, 0);
@@ -1153,11 +1247,11 @@ class AXBarChartComponent extends NXComponent {
         return !this.hiddenSeries.has(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", type: AXBarChartComponent, isStandalone: true, selector: "ax-bar-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: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-bar-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-bar-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: var(--ax-sys-color-lightest-surface)}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-bar-chart .ax-bar-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-bar-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-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.1.8", type: AXBarChartComponent, isStandalone: true, selector: "ax-bar-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: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-bar-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-bar-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: var(--ax-sys-color-lightest-surface)}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-bar-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-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.1.8", ngImport: i0, type: AXBarChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-bar-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-bar-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: var(--ax-sys-color-lightest-surface)}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-bar-chart .ax-bar-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-bar-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
+            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-bar-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-bar-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: var(--ax-sys-color-lightest-surface)}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-bar-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
         }], ctorParameters: () => [] });
 
 /**