[Bug]: VerticalBarChart histogram bars overlap with numeric bin centers

Charting Control

VerticalBarChart

Package version

@fluentui/react-charts 9.3.18. The relevant numeric histogram layout code is unchanged in the latest stable 9.3.22.

React version

18.3.1

Environment

System:
  OS: Windows 11 10.0.28000
  CPU: (4) x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
Browsers:
  Chrome: 150.0.7871.127
  Edge: Chromium 150.0.4078.83
npmPackages:
  @fluentui/react-charts: 9.3.18
  react: 18.3.1
  react-dom: 18.3.1

Current Behavior

When VerticalBarChart receives numeric bin centers in mode="histogram" inside a 350 px wide container, the computed bar width is larger than the distance between adjacent rendered X positions, so the bars overlap.

With four evenly spaced centered bins, the rendered SVG contains:

bar x positions: 149, 165, 181, 197
bar width:       24
rendered step:   16
overlap:          8 px

This is visible even though the input X values are evenly spaced by 100.

The issue appears to come from numeric histogram domain centering in VerticalBarChart._getDomainMargins: the domain is compressed based on maxBarWidth, while the final bars retain a width larger than the resulting rendered step.

Expected Behavior

Adjacent histogram bins should not overlap. For evenly spaced numeric bin centers, the final bar width should be no greater than the rendered distance between adjacent centers, or the numeric domain should retain enough width for the selected bar width.

Minimal reproduction

import * as React from 'react';
import { VerticalBarChart } from '@fluentui/react-charts';

const data = [
  { 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' },
];

export const Repro = () => (
  <div style={{ width: 350, height: 150 }}>
    <VerticalBarChart
      data={data}
      mode="histogram"
      barWidth="auto"
      hideLegend
      hideLabels
    />
  </div>
);

Steps to reproduce

1. Render the component above.
2. Inspect the generated SVG rectangles.
3. Observe that each rectangle is 24 px wide, while adjacent X positions are only 16 px apart.
4. Resize the container or reduce the number of bins to see more severe overlap.

Accessibility issue

No.

Suggested severity

Medium - Has workaround.

A categorical X axis avoids the numeric histogram layout path, but loses the intended continuous numeric-axis semantics.

Products/sites affected

None disclosed; reproduced with synthetic data in an isolated local page.

Willing to submit a PR

No.

Duplicate check

Searched open and closed issues for combinations of VerticalBarChart, histogram, numeric axis, overlapping bars, domainMargin, and maxBarWidth; no matching report was found.