From 5ce5220286baafbae369168f9a4f25f224cc0f1c Mon Sep 17 00:00:00 2001
From: Yiyuan LIU <24109638d@connect.polyu.hk>
Date: Sun, 2 Aug 2026 22:20:08 -0400
Subject: [PATCH] fix(react-charts): prevent histogram bar overlap

---
 ...-00f29ed5-2001-4731-a88c-cdaebc2a2858.json |  7 ++++
 .../VerticalBarChart.test.tsx                 | 36 +++++++++++++++++++
 .../VerticalBarChart/VerticalBarChart.tsx     |  4 ++-
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 change/@fluentui-react-charts-00f29ed5-2001-4731-a88c-cdaebc2a2858.json

diff --git a/change/@fluentui-react-charts-00f29ed5-2001-4731-a88c-cdaebc2a2858.json b/change/@fluentui-react-charts-00f29ed5-2001-4731-a88c-cdaebc2a2858.json
new file mode 100644
index 00000000000000..72e0b607e45561
--- /dev/null
+++ b/change/@fluentui-react-charts-00f29ed5-2001-4731-a88c-cdaebc2a2858.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix histogram bar overlap on numeric x-axis",
+  "packageName": "@fluentui/react-charts",
+  "email": "24109638d@connect.polyu.hk",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx
index 1dbe92bfa70130..227bfd0f9b7b5b 100644
--- a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx
@@ -306,6 +306,13 @@ const simpleDatePoints = [
 
 const secondaryYScalePoints = [{ yMaxValue: 50000, yMinValue: 10000 }];
 
+const histogramBinCenterPoints: VerticalBarChartDataPoint[] = [
+  { x: 1550, y: 5, legend: 'Frequency', xAxisCalloutData: '1500-1599' },
+  { x: 1650, y: 19, legend: 'Frequency', xAxisCalloutData: '1600-1699' },
+  { x: 1750, y: 6, legend: 'Frequency', xAxisCalloutData: '1700-1799' },
+  { x: 1850, y: 3, legend: 'Frequency', xAxisCalloutData: '1800-1899' },
+];
+
 describe('Vertical bar chart rendering', () => {
   beforeEach(sharedBeforeEach);
   afterEach(sharedAfterEach);
@@ -1077,3 +1084,32 @@ describe('Render empty chart calling with respective to props', () => {
     expect(htmlAfter).not.toBe(htmlBefore);
   });
 });
+
+describe('VerticalBarChart - histogram mode', () => {
+  beforeEach(sharedBeforeEach);
+  afterEach(sharedAfterEach);
+
+  testWithWait(
+    'Should not overlap numeric histogram bars',
+    VerticalBarChart,
+    {
+      data: histogramBinCenterPoints,
+      mode: 'histogram',
+      barWidth: 'auto',
+      hideLegend: true,
+      hideLabels: true,
+    },
+    container => {
+      const bars = getById(container, /_VBC_bar/i);
+      expect(bars).toHaveLength(histogramBinCenterPoints.length);
+
+      for (let index = 1; index < bars.length; index++) {
+        const previousX = Number.parseFloat(bars[index - 1].getAttribute('x') || '0');
+        const previousWidth = Number.parseFloat(bars[index - 1].getAttribute('width') || '0');
+        const currentX = Number.parseFloat(bars[index].getAttribute('x') || '0');
+
+        expect(previousX + previousWidth).toBeLessThanOrEqual(currentX);
+      }
+    },
+  );
+});
diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx
index d82576c447698a..ef2e846177e899 100644
--- a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx
@@ -1053,7 +1053,9 @@ export const VerticalBarChart: React.FunctionComponent<VerticalBarChartProps> =
         props.mode,
       );
       _domainMargin += _barWidth / 2;
-      _domainMargin += _barWidth / 2;
+      if (props.mode !== 'histogram') {
+        _domainMargin += _barWidth / 2;
+      }
     }
 
     return {