@acorex/charts 20.2.0-next.9 → 20.2.0

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

@@ -1,7 +1,6 @@
 import { NXComponent } from '@acorex/cdk/common';
-import { AX_CHART_COLOR_PALETTE, getChartColor } from '@acorex/charts';
+import { AX_CHART_COLOR_PALETTE, getEasingFunction, computeTooltipPosition, getChartColor } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
-import { AXPlatform } from '@acorex/core/platform';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, input, output, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
@@ -13,10 +12,19 @@ const AXBarChartDefaultConfig = {
     showGrid: true,
     showDataLabels: true,
     showTooltip: true,
+    rotateXAxisLabels: 'auto',
     barWidth: 80,
     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',
@@ -56,12 +64,17 @@ class AXBarChartComponent extends NXComponent {
     chart;
     xScale;
     yScale;
+    xSubScale;
     xAxis;
     yAxis;
     // Chart dimensions
     width;
     height;
-    margin = { top: 20, right: 20, bottom: 30, left: 40 };
+    margin = { top: 0, right: 0, bottom: 0, left: 0 };
+    // Character width ratio heuristic for mixed Latin/Persian texts
+    CHAR_WIDTH_RATIO = 0.65;
+    // Tooltip gap in pixels for consistent spacing
+    TOOLTIP_GAP = 10;
     // Animation state
     _initialAnimationComplete = signal(false, ...(ngDevMode ? [{ debugName: "_initialAnimationComplete" }] : []));
     // Tooltip state
@@ -85,7 +98,7 @@ class AXBarChartComponent extends NXComponent {
     // Inject the chart colors
     chartColors = inject(AX_CHART_COLOR_PALETTE);
     // Inject AXPlatform
-    platform = inject(AXPlatform);
+    // Removed unused AXPlatform injection
     // Configuration with defaults
     effectiveOptions = computed(() => {
         return {
@@ -93,8 +106,33 @@ 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)
+    hiddenSeries = new Set();
+    // Helpers
+    isClusteredData(value) {
+        return Array.isArray(value) && value.length > 0 && value[0] && 'chartData' in value[0];
+    }
+    getClusterSeriesLabels(groups) {
+        const first = groups[0]?.chartData ?? [];
+        return first.map((d) => d.label);
+    }
     constructor() {
         super();
         // Dynamically load D3 and initialize the chart when the component is ready
@@ -144,29 +182,49 @@ class AXBarChartComponent extends NXComponent {
         if (!this.d3 || !this.chartContainerEl()?.nativeElement)
             return;
         const containerElement = this.chartContainerEl().nativeElement;
-        const data = this.data() || [];
-        // Filter out hidden bars for visible data
-        const visibleData = data.filter((d) => !this.isBarHidden(d.id));
-        // Clear existing chart
-        this.d3.select(containerElement).selectAll('svg').remove();
+        const inputValue = (this.data() || []);
+        const isClustered = this.isClusteredData(inputValue);
+        // Visibility calculation
+        let hasAnyVisible = false;
+        let visibleSingleData = [];
+        let groupedData = [];
+        if (isClustered) {
+            groupedData = inputValue;
+            const seriesLabels = groupedData.length > 0 ? this.getClusterSeriesLabels(groupedData) : [];
+            const visibleSeries = seriesLabels.filter((s) => !this.hiddenSeries.has(s));
+            hasAnyVisible = groupedData.some((g) => visibleSeries.some((_, idx) => !!g.chartData[idx]));
+        }
+        else {
+            const single = inputValue || [];
+            visibleSingleData = single.filter((d) => !this.isBarHidden(d.id));
+            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();
         // Early return if no data
-        if (!data.length) {
+        if (!inputValue.length) {
             this.showNoDataMessage(containerElement);
             return;
         }
         // Early return if all bars are hidden
-        if (visibleData.length === 0) {
+        if (!hasAnyVisible) {
             this.showAllBarsHiddenMessage(containerElement);
             return;
         }
         // Get options and setup dimensions
         const chartOptions = this.effectiveOptions();
         this.setupDimensions(containerElement, chartOptions);
-        // Create scales and axes using visible data
-        this.setupScales(visibleData);
-        this.createAxes(chartOptions);
-        // Render the bars
-        this.renderBars(data);
+        // Create scales and axes and render based on mode
+        if (isClustered) {
+            this.setupScalesClustered(groupedData);
+            this.createAxesClustered(chartOptions, groupedData);
+            this.renderBarsClustered(groupedData);
+        }
+        else {
+            this.setupScales(visibleSingleData);
+            this.createAxes(chartOptions);
+            this.renderBars(visibleSingleData);
+        }
     }
     /**
      * Updates the chart when inputs change
@@ -178,100 +236,101 @@ class AXBarChartComponent extends NXComponent {
      * Cleans up chart resources
      */
     cleanupChart() {
-        if (this.svg) {
-            this.d3?.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
-            this.svg = null;
-            this.chart = null;
+        const container = this.chartContainerEl()?.nativeElement;
+        if (container) {
+            // Only remove chart SVG and message containers to preserve tooltip component
+            this.d3?.select(container).selectAll('svg, .ax-chart-message-container').remove();
         }
+        this.svg = null;
+        this.chart = null;
         this._tooltipVisible.set(false);
     }
     /**
      * Sets up chart dimensions and creates SVG with responsive attributes
      */
     setupDimensions(containerElement, options) {
-        // Calculate margins based on options
-        this.calculateMargins(options, containerElement.clientWidth);
+        // Remove outer margins; calculate only internal paddings for axes and labels
+        this.margin = { top: 0, right: 0, bottom: 0, left: 0 };
         // Get container dimensions
         const containerWidth = containerElement.clientWidth;
         const containerHeight = containerElement.clientHeight;
-        // If options specify width and height, use those, otherwise default to container size
-        const minDim = Math.min(200, containerWidth, containerHeight); // Ensure reasonable minimum
-        if (options.width && options.height) {
-            // Explicit dimensions provided
-            this.width = options.width - this.margin.left - this.margin.right;
-            this.height = options.height - this.margin.top - this.margin.bottom;
+        // Axis visibility
+        const showXAxis = options.showXAxis !== false;
+        const showYAxis = options.showYAxis !== false;
+        // Internal left padding for Y-axis ticks/labels/title
+        const axisAndTickPadding = 10;
+        const yAxisTitleThickness = options.yAxisLabel ? 14 : 0; // rotated label thickness along X
+        const yAxisTitlePadding = options.yAxisLabel ? 14 : 0; // gap between ticks and title
+        const leftPaddingForYAxis = showYAxis
+            ? this.calculateMaxYAxisTickLabelWidth() + axisAndTickPadding + yAxisTitlePadding + yAxisTitleThickness
+            : 0;
+        // Estimate internal bottom padding for X-axis ticks/labels/title
+        let bottomPaddingForXAxis = 0;
+        if (showXAxis) {
+            const raw = (this.data() || []);
+            const isClustered = this.isClusteredData(raw);
+            const barCount = isClustered ? raw.length : raw.length;
+            const longestLabel = (() => {
+                if (isClustered) {
+                    const groups = raw;
+                    return groups.reduce((acc, g) => (acc.length > (g.label?.length ?? 0) ? acc : (g.label ?? '')), '');
+                }
+                const flat = raw || [];
+                return flat.reduce((a, b) => (a.length > b.label.length ? a : b.label), '');
+            })();
+            const baseWidth = options.width ?? containerWidth;
+            const workingWidth = Math.max(1, baseWidth - leftPaddingForYAxis);
+            const dynamicFontSize = Math.max(10, Math.min(14, Math.round(workingWidth / 50)));
+            const estimatedLongestLabelWidth = longestLabel.length * dynamicFontSize * 0.65;
+            const availableWidthPerBar = barCount > 0 ? workingWidth / barCount : workingWidth;
+            const willRotate = options.rotateXAxisLabels === true
+                ? true
+                : options.rotateXAxisLabels === false
+                    ? false
+                    : estimatedLongestLabelWidth > availableWidthPerBar;
+            const tickAreaHeight = willRotate
+                ? estimatedLongestLabelWidth * Math.SQRT1_2 + dynamicFontSize * Math.SQRT1_2 + 6
+                : dynamicFontSize + 8;
+            const gapBelowTicks = options.xAxisLabel && !willRotate ? 14 : 0; // matches renderer
+            const titleBlockHeight = options.xAxisLabel && !willRotate ? 24 : 0; // 14px font + ~10px gap
+            bottomPaddingForXAxis = tickAreaHeight + gapBelowTicks + titleBlockHeight;
+        }
+        // Determine plotting dimensions with sensible fallbacks
+        const fallbackPlotHeight = 240; // ensures visible plot when container has no height
+        const baseWidth = options.width ?? containerWidth;
+        const totalWidth = Math.max(200, baseWidth > 0 ? baseWidth : 200);
+        const plotWidth = Math.max(0, totalWidth - leftPaddingForYAxis);
+        let plotHeight;
+        if (options.height && options.height > 0) {
+            plotHeight = Math.max(120, options.height - bottomPaddingForXAxis);
+        }
+        else if (containerHeight > 0) {
+            plotHeight = Math.max(120, containerHeight - bottomPaddingForXAxis, fallbackPlotHeight);
         }
         else {
-            // Responsive dimensions
-            this.width = Math.max(containerWidth, minDim) - this.margin.left - this.margin.right;
-            this.height = Math.max(containerHeight, minDim) - this.margin.top - this.margin.bottom;
+            plotHeight = fallbackPlotHeight;
         }
-        // Create responsive SVG that scales with its container
+        this.width = plotWidth;
+        this.height = plotHeight;
+        // Create SVG with explicit pixel dimensions to avoid collapse
+        // Add a small internal top padding to avoid clipping the top-most Y-axis label
+        const topPaddingForTopEdge = 6;
+        const totalHeight = this.height + bottomPaddingForXAxis + topPaddingForTopEdge;
         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('height', String(totalHeight))
+            .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})`);
-    }
-    /**
-     * Calculates chart margins based on options
-     */
-    calculateMargins(options, containerWidth) {
-        // Start with default margins
-        this.margin = {
-            top: 20,
-            right: 20,
-            bottom: 30,
-            left: 40,
-        };
-        const visibleData = this.data().filter((d) => !this.isBarHidden(d.id));
-        const barCount = visibleData.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) {
-            const workingWidth = containerWidth - this.margin.left - this.margin.right;
-            if (workingWidth > 0) {
-                const availableWidthPerBar = workingWidth / barCount;
-                const longestLabel = visibleData.reduce((a, b) => (a.label.length > b.label.length ? a : b), {
-                    label: '',
-                }).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;
-                // 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.
-                }
-            }
-        }
-        // 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 minimum margins for axes
-        if (options.showXAxis !== false) {
-            this.margin.bottom = Math.max(this.margin.bottom, 35);
-        }
-        if (options.showYAxis !== false) {
-            this.margin.left = Math.max(this.margin.left, 45);
-        }
+        // Create chart group translated by internal paddings (no external margins)
+        this.chart = this.svg
+            .append('g')
+            .attr('class', 'chart-content')
+            .attr('transform', `translate(${leftPaddingForYAxis},${topPaddingForTopEdge})`);
     }
+    // calculateMargins was unused; removed to simplify and reduce maintenance surface
     /**
      * Creates x and y scales for the chart
      */
@@ -283,7 +342,7 @@ class AXBarChartComponent extends NXComponent {
         // Create x scale (band scale for categorical data)
         this.xScale = this.d3
             .scaleBand()
-            .domain(data.map((d) => d.label))
+            .domain(data.map((d) => d.id))
             .range([0, this.width])
             .padding(padding);
         // Create y scale (linear scale for values)
@@ -293,126 +352,214 @@ class AXBarChartComponent extends NXComponent {
             .nice()
             .range([this.height, 0]);
     }
+    /**
+     * Creates x and y scales for clustered charts
+     */
+    setupScalesClustered(groups) {
+        const seriesLabels = groups.length > 0 ? this.getClusterSeriesLabels(groups) : [];
+        const visibleSeries = seriesLabels.filter((s) => !this.hiddenSeries.has(s));
+        // Outer band for clusters
+        const outerPadding = 0.2;
+        this.xScale = this.d3
+            .scaleBand()
+            .domain(groups.map((g) => g.id))
+            .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);
+        // Y scale across all visible values
+        const allVisibleValues = [];
+        for (const g of groups) {
+            visibleSeries.forEach((_, idx) => {
+                const item = g.chartData[idx];
+                if (item && typeof item.value === 'number')
+                    allVisibleValues.push(item.value);
+            });
+        }
+        const yMax = this.d3.max(allVisibleValues) || 0;
+        this.yScale = this.d3.scaleLinear().domain([0, yMax]).nice().range([this.height, 0]);
+    }
     /**
      * 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;
-        const isRtl = this.platform.isRtl();
-        // Create a group for all axes
         const axesGroup = this.chart.append('g').attr('class', 'ax-bar-chart-axes');
         if (showXAxis) {
-            // 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));
-            // 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)');
-            // Automatically rotate labels if they are likely to overlap
-            if (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.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)
-                    .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)));
-            const yTickTexts = 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)');
-            if (isRtl) {
-                yTickTexts.attr('text-anchor', 'start');
-            }
-            // 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)
-                    .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.createGridLines();
+        }
+    }
+    createXAxis(axesGroup, options) {
+        const visibleDataForTicks = (this.data() || []).filter((d) => !this.isBarHidden(d.id));
+        const idToLabel = new Map(visibleDataForTicks.map((d) => [d.id, d.label]));
+        this.buildXAxisCommon(axesGroup, idToLabel, options);
+    }
+    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 = this.getYAxisTickFontSizeBasedOnHeight();
+        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) {
+        const options = this.effectiveOptions();
+        // Check if user explicitly set rotation option
+        if (options.rotateXAxisLabels === true)
+            return true;
+        if (options.rotateXAxisLabels === false)
+            return false;
+        // If 'auto' or undefined, use intelligent calculation
+        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 * this.CHAR_WIDTH_RATIO;
+        // Heuristic: avoid rotation when there are few categories (<= 6) even if estimation is slightly larger
+        const domainCount = this.xScale.domain().length;
+        if (domainCount <= 6) {
+            return estimatedWidth > step * 1.4; // be more tolerant for small datasets
+        }
+        return estimatedWidth > step;
+    }
+    createXAxisTitle(axesGroup, title, tickAreaHeight, gapBelowTicks = 8) {
+        // Title positioned directly below tick area with a consistent gap
+        const labelY = this.height + tickAreaHeight + gapBelowTicks;
+        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 = 20; // Increased 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
+     */
+    createAxesClustered(options, groups) {
+        const showXAxis = options.showXAxis !== false;
+        const showYAxis = options.showYAxis !== false;
+        const showGrid = options.showGrid !== false;
+        const axesGroup = this.chart.append('g').attr('class', 'ax-bar-chart-axes');
+        if (showXAxis) {
+            this.createXAxisClustered(axesGroup, options, groups);
+        }
+        if (showYAxis) {
+            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();
         }
     }
+    createXAxisClustered(axesGroup, options, groups) {
+        const idToLabel = new Map(groups.map((g) => [g.id, g.label]));
+        this.buildXAxisCommon(axesGroup, idToLabel, options);
+    }
     /**
      * Renders the bars with animations
      */
     renderBars(data) {
         // Filter out hidden bars
         const visibleData = data.filter((d) => !this.isBarHidden(d.id));
-        const originalFullData = this.data(); // Get the original full data set
+        const originalFullData = this.data() || [];
         // Reset animation state
         this._initialAnimationComplete.set(false);
         // Get corner radius from options
         const radius = this.effectiveOptions().cornerRadius;
         // Get animation options
         const animationDuration = this.effectiveOptions().animationDuration;
-        const animationEasing = this.getEasingFunction(this.effectiveOptions().animationEasing);
+        const animationEasing = getEasingFunction(this.d3, this.effectiveOptions().animationEasing);
         // Create a container for all bars
         const barsContainer = this.chart.append('g').attr('class', 'ax-bar-chart-bars-container');
         // Create groups for each bar to handle transformations
@@ -425,14 +572,14 @@ 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.label))
-            .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; // initial height is zero
+            return `M${x},${y} L${x},${y} L${x + width},${y} 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);
@@ -446,7 +593,7 @@ class AXBarChartComponent extends NXComponent {
                 .append('text')
                 .attr('class', 'ax-bar-chart-data-label')
                 .attr('text-anchor', 'middle')
-                .attr('x', (d) => this.xScale(d.label) + this.xScale.bandwidth() / 2)
+                .attr('x', (d) => this.xScale(d.id) + this.xScale.bandwidth() / 2)
                 .attr('y', this.height) // Start from bottom for animation
                 .style('font-size', 'clamp(8px, 2vmin, 12px)')
                 .style('font-weight', '500')
@@ -469,7 +616,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);
@@ -480,11 +627,11 @@ class AXBarChartComponent extends NXComponent {
                 this.updateTooltipPosition(event);
             }
         })
-            .on('mouseleave', (event, d) => {
+            .on('mouseleave', (event) => {
             // 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);
@@ -500,8 +647,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(() => {
@@ -510,44 +673,150 @@ class AXBarChartComponent extends NXComponent {
         });
     }
     /**
-     * Gets the appropriate D3 easing function based on the option string
+     * Renders bars for clustered charts
      */
-    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; // Default easing
+    renderBarsClustered(groups) {
+        const seriesLabels = groups.length > 0 ? this.getClusterSeriesLabels(groups) : [];
+        const visibleSeries = seriesLabels.filter((s) => !this.hiddenSeries.has(s));
+        this._initialAnimationComplete.set(false);
+        const radius = this.effectiveOptions().cornerRadius;
+        const animationDuration = this.effectiveOptions().animationDuration;
+        const animationEasing = getEasingFunction(this.d3, this.effectiveOptions().animationEasing);
+        const barsContainer = this.chart.append('g').attr('class', 'ax-bar-chart-bars-container');
+        const groupSel = barsContainer
+            .selectAll('.ax-bar-chart-group')
+            .data(groups)
+            .enter()
+            .append('g')
+            .attr('class', 'ax-bar-chart-group')
+            .attr('transform', (g) => `translate(${this.xScale(g.id)},0)`);
+        const barGroups = groupSel
+            .selectAll('.ax-bar-chart-bar-group')
+            .data((g) => visibleSeries.map((label, idx) => ({ group: g, seriesLabel: label, seriesIndex: idx })))
+            .enter()
+            .append('g')
+            .style('cursor', 'pointer')
+            .attr('class', 'ax-bar-chart-bar-group');
+        const bars = barGroups
+            .append('path')
+            .attr('class', 'ax-bar-chart-bar')
+            .attr('data-series', (d) => d.seriesLabel)
+            .attr('d', (d) => {
+            const x = this.xSubScale(d.seriesLabel);
+            const width = this.xSubScale.bandwidth();
+            const y = this.height - 0.5; // initial height is zero
+            return `M${x},${y} L${x},${y} L${x + width},${y} L${x + width},${y} Z`;
+        })
+            .attr('fill', (d) => {
+            const item = d.group.chartData[d.seriesIndex];
+            const colorIndex = d.seriesIndex;
+            return item?.color || this.getColor(colorIndex);
+        });
+        if (this.effectiveOptions().showDataLabels !== false) {
+            barGroups
+                .append('text')
+                .attr('class', 'ax-bar-chart-data-label')
+                .attr('text-anchor', 'middle')
+                .attr('x', (d) => (this.xSubScale(d.seriesLabel) || 0) + this.xSubScale.bandwidth() / 2)
+                .attr('y', this.height)
+                .style('font-size', 'clamp(8px, 2vmin, 12px)')
+                .style('font-weight', '500')
+                .style('fill', 'rgb(var(--ax-comp-bar-chart-data-labels-color))')
+                .style('opacity', 0)
+                .text((d) => {
+                const item = d.group.chartData[d.seriesIndex];
+                return item ? item.value : '';
+            });
+            barGroups
+                .selectAll('.ax-bar-chart-data-label')
+                .transition()
+                .duration(animationDuration)
+                .delay((_, i) => i * 50 + 100)
+                .attr('y', (d) => {
+                const item = d.group.chartData[d.seriesIndex];
+                return item ? this.yScale(item.value) - 8 : this.height;
+            })
+                .style('opacity', 1)
+                .ease(animationEasing);
         }
+        barGroups
+            .on('mouseenter', (event, d) => {
+            if (!this._initialAnimationComplete())
+                return;
+            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)
+                this.handleBarHover(event, item, d.group);
+        })
+            .on('mousemove', (event) => {
+            if (this._initialAnimationComplete())
+                this.updateTooltipPosition(event);
+        })
+            .on('mouseleave', (event) => {
+            if (!this._initialAnimationComplete())
+                return;
+            const barEl = this.d3.select(event.currentTarget).select('path');
+            barEl.transition().duration(150).style('filter', null);
+            this._tooltipVisible.set(false);
+        })
+            .on('click', (event, d) => {
+            if (!this._initialAnimationComplete())
+                return;
+            const item = d.group.chartData[d.seriesIndex];
+            if (item)
+                this.handleBarClick(event, item);
+        });
+        bars
+            .transition()
+            .duration(animationDuration)
+            .delay((_, i) => i * 50)
+            .attrTween('d', (d) => {
+            const x = this.xSubScale(d.seriesLabel);
+            const width = this.xSubScale.bandwidth();
+            const item = d.group.chartData[d.seriesIndex];
+            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()
+            .then(() => this._initialAnimationComplete.set(true));
     }
+    /**
+     * Gets the appropriate D3 easing function based on the option string
+     */
+    // getEasingFunction moved to shared chart utils
     /**
      * Handles bar hover event and shows tooltip
      */
-    handleBarHover(event, datum) {
+    handleBarHover(event, datum, group) {
         if (this.effectiveOptions().showTooltip !== false) {
-            const index = this.data().findIndex((item) => item.id === datum.id);
-            const color = datum.color || this.getColor(index);
+            const dataValue = this.data();
+            const isClustered = this.isClusteredData(dataValue);
+            const flatData = isClustered
+                ? dataValue.flatMap((g) => g.chartData)
+                : 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
-            const total = this.data().reduce((sum, item) => sum + item.value, 0);
+            const total = isClustered
+                ? dataValue.reduce((sum, g) => sum + g.chartData.reduce((s, it) => s + it.value, 0), 0)
+                : flatData.reduce((sum, item) => sum + item.value, 0);
             const percentage = total > 0 ? ((datum.value / total) * 100).toFixed(1) : '0';
             this._tooltipData.set({
-                title: datum.tooltipLabel || datum.label,
+                title: group ? `${datum.tooltipLabel || datum.label} — ${group.label}` : datum.tooltipLabel || datum.label,
                 value: datum.value.toString(),
                 percentage: `${percentage}%`,
                 color: color,
@@ -560,25 +829,14 @@ class AXBarChartComponent extends NXComponent {
      * Updates tooltip position based on mouse coordinates
      */
     updateTooltipPosition(event) {
-        const container = this.chartContainerEl().nativeElement.getBoundingClientRect();
-        const tooltipEl = this.chartContainerEl().nativeElement.querySelector('.chart-tooltip');
-        if (!tooltipEl) {
-            const x = event.clientX - container.left;
-            const y = event.clientY - container.top;
-            this._tooltipPosition.set({ x, y });
+        const containerEl = this.chartContainerEl()?.nativeElement;
+        if (!containerEl)
             return;
-        }
-        const tooltipRect = tooltipEl.getBoundingClientRect();
-        let x = event.clientX - container.left;
-        const y = event.clientY - container.top;
-        // Adjust position if near the right edge
-        if (x + tooltipRect.width + 10 > container.width) {
-            x = x - tooltipRect.width - 10;
-        }
-        else {
-            x = x + 10;
-        }
-        this._tooltipPosition.set({ x, y });
+        const containerRect = containerEl.getBoundingClientRect();
+        const tooltipEl = containerEl.querySelector('.chart-tooltip');
+        const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
+        const pos = computeTooltipPosition(containerRect, tooltipRect, event.clientX, event.clientY, this.TOOLTIP_GAP);
+        this._tooltipPosition.set(pos);
     }
     /**
      * Handles bar click event
@@ -590,61 +848,15 @@ class AXBarChartComponent extends NXComponent {
      * Shows a message when no data is available
      */
     showNoDataMessage(containerElement) {
-        // Clear existing contents first
-        this.d3.select(containerElement).selectAll('*').remove();
-        const messageContainer = this.d3
-            .select(containerElement)
-            .append('div')
-            // Apply generic container class, specific bar chart background class, and existing specific class
-            .attr('class', 'ax-chart-message-container ax-bar-chart-message-background ax-bar-chart-no-data-message');
-        // Add an icon
-        messageContainer
-            .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>');
-        // 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');
-        // 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');
+        this.clearChartArea(containerElement);
+        this.showMessage(containerElement, this.effectiveMessages().noDataIcon, this.effectiveMessages().noData, this.effectiveMessages().noDataHelp, 'ax-bar-chart-no-data-message');
     }
     /**
      * Shows a message when all bars are hidden
      */
     showAllBarsHiddenMessage(containerElement) {
-        // Clear existing contents first
-        this.d3.select(containerElement).selectAll('*').remove();
-        const messageContainer = this.d3
-            .select(containerElement)
-            .append('div')
-            // Apply generic container class, specific bar chart background class, and existing specific class
-            .attr('class', 'ax-chart-message-container ax-bar-chart-message-background ax-bar-chart-no-data-message');
-        // Add an icon
-        messageContainer
-            .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>');
-        // 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');
-        // 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');
+        this.clearChartArea(containerElement);
+        this.showMessage(containerElement, this.effectiveMessages().allHiddenIcon, this.effectiveMessages().allHidden, this.effectiveMessages().allHiddenHelp, 'ax-bar-chart-no-data-message');
     }
     /**
      * Gets the color for a bar based on its index
@@ -663,11 +875,34 @@ class AXBarChartComponent extends NXComponent {
      * Returns legend items based on the chart data
      */
     getLegendItems() {
-        const data = this.data() || [];
-        const total = data.reduce((sum, item) => sum + (typeof item.value === 'number' ? item.value : 0), 0);
-        return data.map((item, index) => {
-            const value = typeof item.value === 'number' ? item.value : 0;
-            const percentage = total > 0 ? (value / total) * 100 : 0;
+        const value = (this.data() || []);
+        if (this.isClusteredData(value)) {
+            const groups = value;
+            const seriesLabels = groups.length > 0 ? this.getClusterSeriesLabels(groups) : [];
+            const total = groups.reduce((sum, g) => sum + g.chartData.reduce((s, it) => s + (typeof it.value === 'number' ? it.value : 0), 0), 0);
+            return seriesLabels.map((label, index) => {
+                const seriesTotal = groups.reduce((s, g) => {
+                    const item = g.chartData[index];
+                    const v = item && typeof item.value === 'number' ? item.value : 0;
+                    return s + v;
+                }, 0);
+                const percentage = total > 0 ? (seriesTotal / total) * 100 : 0;
+                const firstItem = groups[0]?.chartData[index];
+                return {
+                    id: label,
+                    name: label || `Series ${index + 1}`,
+                    value: seriesTotal,
+                    percentage,
+                    color: firstItem?.color || this.getColor(index),
+                    hidden: this.hiddenSeries.has(label),
+                };
+            });
+        }
+        const flat = value;
+        const total = flat.reduce((sum, item) => sum + (typeof item.value === 'number' ? item.value : 0), 0);
+        return flat.map((item, index) => {
+            const val = typeof item.value === 'number' ? item.value : 0;
+            const percentage = total > 0 ? (val / total) * 100 : 0;
             return {
                 id: item.id,
                 name: item.label || `Item ${index + 1}`,
@@ -685,9 +920,9 @@ class AXBarChartComponent extends NXComponent {
     highlightSegment(id) {
         if (!this.svg)
             return;
-        // If the bar is hidden, we shouldn't try to highlight it
-        if (id !== null && this.isBarHidden(id)) {
-            // Just unhighlight everything when trying to highlight a hidden bar
+        const value = (this.data() || []);
+        const isClustered = this.isClusteredData(value);
+        const resetAll = () => {
             this.svg
                 .selectAll('.ax-bar-chart-bar')
                 .classed('ax-bar-chart-highlighted', false)
@@ -697,63 +932,63 @@ class AXBarChartComponent extends NXComponent {
                 .attr('stroke', null)
                 .attr('stroke-width', null)
                 .attr('stroke-opacity', null);
+        };
+        if (id === null) {
+            resetAll();
             return;
         }
-        if (id === null) {
-            // If id is null, unhighlight everything
-            this.svg
-                .selectAll('.ax-bar-chart-bar')
-                .classed('ax-bar-chart-highlighted', false)
-                .classed('ax-bar-chart-dimmed', false)
-                .attr('opacity', 1)
-                .attr('filter', null)
-                .attr('stroke', null)
-                .attr('stroke-width', null)
-                .attr('stroke-opacity', null);
+        if (!isClustered) {
+            if (this.isBarHidden(id)) {
+                resetAll();
+                return;
+            }
+            const targetBar = this.svg.selectAll('.ax-bar-chart-bar').filter((d) => d?.id === id);
+            if (targetBar.empty())
+                return;
+            const isCurrentlyHighlighted = targetBar.classed('ax-bar-chart-highlighted');
+            if (isCurrentlyHighlighted) {
+                resetAll();
+            }
+            else {
+                resetAll();
+                targetBar
+                    .classed('ax-bar-chart-highlighted', true)
+                    .attr('filter', 'drop-shadow(0 0 4px rgba(0, 0, 0, 0.3))')
+                    .attr('stroke', '#000')
+                    .attr('stroke-width', '1px')
+                    .attr('stroke-opacity', '0.3')
+                    .style('transition', 'all 0.2s ease-in-out');
+                this.svg
+                    .selectAll('.ax-bar-chart-bar')
+                    .filter((d) => d?.id !== id)
+                    .classed('ax-bar-chart-dimmed', true)
+                    .attr('opacity', 0.5)
+                    .style('transition', 'opacity 0.2s ease-in-out');
+            }
             return;
         }
-        // Find the target bar
-        const targetBar = this.svg.selectAll('.ax-bar-chart-bar').filter((d) => d?.id === id);
-        // Safety check - if no matching bar is found, do nothing
-        if (targetBar.empty())
+        const targetBars = this.svg.selectAll('.ax-bar-chart-bar').filter((_, i, nodes) => {
+            const node = nodes[i];
+            return node.getAttribute('data-series') === id;
+        });
+        if (targetBars.empty())
             return;
-        // Check if the target bar is currently highlighted
-        const isCurrentlyHighlighted = targetBar.classed('ax-bar-chart-highlighted');
-        if (isCurrentlyHighlighted) {
-            // If already highlighted, unhighlight all bars
-            this.svg
-                .selectAll('.ax-bar-chart-bar')
-                .classed('ax-bar-chart-highlighted', false)
-                .classed('ax-bar-chart-dimmed', false)
-                .attr('opacity', 1)
-                .attr('filter', null)
-                .attr('stroke', null)
-                .attr('stroke-width', null)
-                .attr('stroke-opacity', null);
+        const isHighlighted = targetBars.classed('ax-bar-chart-highlighted');
+        if (isHighlighted) {
+            resetAll();
         }
         else {
-            // Reset all bars first
-            this.svg
-                .selectAll('.ax-bar-chart-bar')
-                .classed('ax-bar-chart-highlighted', false)
-                .classed('ax-bar-chart-dimmed', false)
-                .attr('opacity', 1)
-                .attr('filter', null)
-                .attr('stroke', null)
-                .attr('stroke-width', null)
-                .attr('stroke-opacity', null);
-            // Highlight the target bar
-            targetBar
+            resetAll();
+            targetBars
                 .classed('ax-bar-chart-highlighted', true)
                 .attr('filter', 'drop-shadow(0 0 4px rgba(0, 0, 0, 0.3))')
                 .attr('stroke', '#000')
                 .attr('stroke-width', '1px')
                 .attr('stroke-opacity', '0.3')
                 .style('transition', 'all 0.2s ease-in-out');
-            // Dim other bars
             this.svg
                 .selectAll('.ax-bar-chart-bar')
-                .filter((d) => d?.id !== id)
+                .filter((_, i, nodes) => nodes[i].getAttribute('data-series') !== id)
                 .classed('ax-bar-chart-dimmed', true)
                 .attr('opacity', 0.5)
                 .style('transition', 'opacity 0.2s ease-in-out');
@@ -765,41 +1000,118 @@ class AXBarChartComponent extends NXComponent {
      * @returns New visibility state (true = visible, false = hidden)
      */
     toggleSegment(id) {
-        const wasAllHidden = this.data().length > 0 && this.data().every((d) => this.isBarHidden(d.id));
-        if (this.hiddenBars.has(id)) {
-            // Making a bar visible
-            this.hiddenBars.delete(id);
-            // If all bars were previously hidden, we need to ensure the message is cleared
+        const value = (this.data() || []);
+        const isClustered = this.isClusteredData(value);
+        if (!isClustered) {
+            const wasAllHidden = value.length > 0 && value.every((d) => this.isBarHidden(d.id));
+            if (this.hiddenBars.has(id)) {
+                this.hiddenBars.delete(id);
+                if (wasAllHidden) {
+                    if (this.chartContainerEl()?.nativeElement) {
+                        this.d3
+                            ?.select(this.chartContainerEl().nativeElement)
+                            .selectAll('svg, .ax-chart-message-container')
+                            .remove();
+                        setTimeout(() => {
+                            this.createChart();
+                        }, 0);
+                    }
+                }
+                else {
+                    this.updateChart();
+                }
+            }
+            else {
+                this.hiddenBars.add(id);
+                this.updateChart();
+            }
+            return !this.hiddenBars.has(id);
+        }
+        // Clustered mode: toggle series by label
+        const groups = value;
+        const seriesLabels = groups.length > 0 ? this.getClusterSeriesLabels(groups) : [];
+        const seriesCount = seriesLabels.length;
+        const wasAllHidden = seriesCount > 0 && this.hiddenSeries.size >= seriesCount;
+        if (this.hiddenSeries.has(id)) {
+            this.hiddenSeries.delete(id);
             if (wasAllHidden) {
-                // Force complete DOM cleanup and redraw
                 if (this.chartContainerEl()?.nativeElement) {
-                    // Clear everything in the container
-                    this.d3?.select(this.chartContainerEl().nativeElement).selectAll('*').remove();
-                    // Force full redraw
+                    this.d3?.select(this.chartContainerEl().nativeElement).selectAll('svg, .ax-chart-message-container').remove();
                     setTimeout(() => {
                         this.createChart();
                     }, 0);
                 }
             }
             else {
-                // Normal update for other cases
                 this.updateChart();
             }
         }
         else {
-            // Hiding a bar
-            this.hiddenBars.add(id);
+            this.hiddenSeries.add(id);
             this.updateChart();
         }
-        // Return the new visibility state
-        return !this.hiddenBars.has(id);
+        return !this.hiddenSeries.has(id);
+    }
+    // ===== Helper utilities for modularity and maintainability =====
+    getContainerElement() {
+        return this.chartContainerEl()?.nativeElement ?? null;
+    }
+    clearChartArea(containerElement) {
+        this.d3.select(containerElement).selectAll('svg, .ax-chart-message-container').remove();
+    }
+    getXAxisTickFontSizeBasedOnWidth() {
+        return Math.max(10, Math.min(14, Math.round(this.width / 50)));
+    }
+    getYAxisTickFontSizeBasedOnHeight() {
+        return Math.max(11, Math.min(15, Math.round(this.height / 30)));
+    }
+    buildXAxisCommon(axesGroup, idToLabel, options) {
+        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 dynamicFontSize = this.getXAxisTickFontSizeBasedOnWidth();
+        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');
+        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');
+        }
+        this.xAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
+        if (options.xAxisLabel && !isRotated) {
+            const tickNodes = (this.xAxis.selectAll('text').nodes() || []);
+            const measuredTickHeight = tickNodes.length > 0
+                ? Math.max(...tickNodes.map((n) => (n && n.getBBox ? n.getBBox().height : dynamicFontSize)))
+                : dynamicFontSize;
+            const tickAreaHeight = measuredTickHeight + 6;
+            const gapBelowTicks = 14;
+            this.createXAxisTitle(axesGroup, options.xAxisLabel, tickAreaHeight, gapBelowTicks);
+        }
+    }
+    // computeTooltipPosition moved to shared chart utils
+    showMessage(containerElement, iconClass, text, helpText, specificClass) {
+        const container = this.d3
+            .select(containerElement)
+            .append('div')
+            .attr('class', `ax-chart-message-container ax-bar-chart-message-background ${specificClass}`);
+        container
+            .append('div')
+            .attr('class', 'ax-chart-message-icon ax-bar-chart-no-data-icon')
+            .html(`<i class="${iconClass} fa-2x"></i>`);
+        container.append('div').attr('class', 'ax-chart-message-text ax-bar-chart-no-data-text').text(text);
+        container.append('div').attr('class', 'ax-chart-message-help ax-bar-chart-no-data-help').text(helpText);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", 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\" role=\"img\" #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: 0, 0, 0, 0}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;background-color:rgba(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:hidden}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;border:1px solid rgba(var(--ax-sys-color-surface));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.3", ngImport: i0, type: AXBarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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\" role=\"img\" #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: 0, 0, 0, 0}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;background-color:rgba(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:hidden}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;border:1px solid rgba(var(--ax-sys-color-surface));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: () => [] });
 
 /**