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

[HellbringerOnline]

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.

[HellbringerOnline]

Confirmed that the issue is still reproducible with @fluentui/react-charts 9.3.22.

I also repeated the synthetic test without the chart being placed inside an external popover or overflow-constrained container. The chart's measured width was approximately 1638 px, so the bar layout issue is not caused by the original 350 px container:

• Four numeric histogram points were rendered as 24 px-wide bars with x positions spaced 16 px apart, producing 8 px overlap.
• Two adjacent numeric histogram points were rendered at the exact same x position, producing complete visual collapse.

There is a separate tooltip behavior when the same 350 px chart is rendered inside an overflow-constrained popover. On bar hover, the chart popover's autoSize: 'always' positioning calculates only 58 px of available height and applies inline height: 58px; max-height: 58px; overflow-y: auto, while the tooltip content requires approximately 101 px. This produces a vertical scrollbar. Rendering the same data without the external overflow container gives the tooltip its full height with no scrollbar, while the bar overlap/collapse still remains.

The histogram bar behavior therefore persists in 9.3.22 and is independent of the external container width; the tooltip scrollbar is a distinct clipping/auto-size interaction with the 350 px overflow container.