@acorex/charts 20.1.5 → 20.1.7

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

@@ -190,7 +190,7 @@ class AXBarChartComponent extends NXComponent {
      */
     setupDimensions(containerElement, options) {
         // Calculate margins based on options
-        this.calculateMargins(options);
+        this.calculateMargins(options, containerElement.clientWidth);
         // Get container dimensions
         const containerWidth = containerElement.clientWidth;
         const containerHeight = containerElement.clientHeight;
@@ -221,7 +221,7 @@ class AXBarChartComponent extends NXComponent {
     /**
      * Calculates chart margins based on options
      */
-    calculateMargins(options) {
+    calculateMargins(options, containerWidth) {
         // Start with default margins
         this.margin = {
             top: 20,
@@ -229,6 +229,30 @@ class AXBarChartComponent extends NXComponent {
             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;
@@ -289,11 +313,25 @@ class AXBarChartComponent extends NXComponent {
                 .call(this.d3.axisBottom(this.xScale));
             // Style the axis text
             const dynamicXAxisTickFontSize = Math.max(11, Math.min(15, Math.round(this.width / 45)));
-            this.xAxis
+            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