Fix overlapping bars on continuous axes (#31035)

change/@fluentui-react-charting-96d56d89-389f-4d0c-b3fb-250ac7f02936.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix overlapping bars on continuous axes",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx

@@ -65,6 +65,10 @@ export class GroupedVerticalBarChartBase extends React.Component<
   IGroupedVerticalBarChartProps,
   IGroupedVerticalBarChartState
 > {
+  public static defaultProps: Partial<IGroupedVerticalBarChartProps> = {
+    maxBarWidth: 24,
+  };
+
   private _createSet: (
     data: IGroupedVerticalBarChartData[],
   ) => // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -212,15 +216,13 @@ export class GroupedVerticalBarChartBase extends React.Component<
   ) => {
     const xScale0 = this._createX0Scale(containerWidth);
 
-    if (this.props.barwidth === 'auto') {
-      // Setting the bar width here is safe because there are no dependencies earlier in the code
-      // that rely on the width of bars in vertical bar charts with string x-axis.
-      this._barWidth = getBarWidth(
-        this.props.barwidth,
-        this.props.maxBarWidth,
-        xScale0.bandwidth() / (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE),
-      );
-    }
+    // Setting the bar width here is safe because there are no dependencies earlier in the code
+    // that rely on the width of bars in vertical bar charts with string x-axis.
+    this._barWidth = getBarWidth(
+      this.props.barwidth,
+      this.props.maxBarWidth,
+      xScale0.bandwidth() / (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE),
+    );
     this._groupWidth = (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE) * this._barWidth;
 
     const xScale1 = this._createX1Scale();
@@ -602,6 +604,9 @@ export class GroupedVerticalBarChartBase extends React.Component<
         /** Total width available to render the bars */
         const totalWidth =
           containerWidth - (this.margins.left! + MIN_DOMAIN_MARGIN) - (this.margins.right! + MIN_DOMAIN_MARGIN);
+        // Update the bar width so that when CartesianChart rerenders,
+        // the following calculations don't use the previous bar width.
+        this._barWidth = getBarWidth(this.props.barwidth, this.props.maxBarWidth);
         const groupWidth = (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE) * this._barWidth;
         /** Rate at which the space between the groups changes wrt the group width */
         const groupGapRate = this._xAxisInnerPadding / (1 - this._xAxisInnerPadding);
@@ -610,7 +615,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
 
         if (totalWidth >= reqWidth) {
           // Center align the chart by setting equal left and right margins for domain
-          this._domainMargin += (totalWidth - reqWidth) / 2;
+          this._domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
         }
       }
     }

packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx

@@ -23,8 +23,8 @@ export interface IGroupedVerticalBarChartProps extends ICartesianChartProps {
   data: IGroupedVerticalBarChartData[];
 
   /**
-   * Width of each bar in the chart. When set to `undefined` or `'default'`, the bar width defaults to 16px.
-   * When set to `auto` (which is only applicable to string x-axis), the bar width is calculated from padding values.
+   * Width of each bar in the chart. When set to `undefined` or `'default'`, the bar width defaults to 16px,
+   * which may decrease to prevent overlap. When set to `'auto'`, the bar width is calculated from padding values.
    * @default 16
    */
   barwidth?: number | 'default' | 'auto';
@@ -90,6 +90,7 @@ export interface IGroupedVerticalBarChartProps extends ICartesianChartProps {
 
   /**
    * Maximum width of a bar, in pixels.
+   * @default 24
    */
   maxBarWidth?: number;