Skip to content

fix(react-charts): honor caller positioning in ChartPopover and forward DonutChart calloutProps - #36775

Open
Cameron Bloomfield (Cam-Bloom) wants to merge 1 commit into
microsoft:masterfrom
Cam-Bloom:user/cam-bloom/chart-popover-positioning
Open

Cameron Bloomfield (Cam-Bloom) wants to merge 1 commit into
microsoft:masterfrom
Cam-Bloom:user/cam-bloom/chart-popover-positioning

Conversation

@Cam-Bloom

Copy link
Copy Markdown

Previous Behavior

ChartPopover read only positioning.target from its positioning prop and hard-coded
autoSize: 'always', offset: 20 and coverTarget: false. position, align, offset,
autoSize and every other value from the caller were dropped, and a shorthand string such as
'below' was ignored. DonutChart never read props.calloutProps, although
DonutChartProps declares it. customCallout.customCalloutProps was merged after the
positioning was read, so calloutPropsPerDataPoint could not position the callout either.

A donut slice larger than about half the ring has a bounding box as tall as the chart. The
callout then had no free space outside the box: it was squashed to a scroll box or hidden.

New Behavior

  • ChartPopover resolves the caller positioning and the per-point positioning with
    resolvePositioningShorthand, merges them key by key, and spreads the result over the
    previous defaults. The chart target is kept unless a caller sets its own.
  • DonutChart forwards calloutProps to ChartPopover, the same as the cartesian charts,
    and merges the caller positioning with its target instead of overriding it.
  • @fluentui/react-positioning is now a declared dependency (it was only a type import).
  • Callers that pass no positioning see no change.

Tests: ChartPopover.test.tsx and DonutChartCallout.test.tsx mock Popover and assert the
positioning it receives. Four of the five fail on the previous code.

Follow-up, out of scope here: GaugeChart and FunnelChart spread calloutProps but
override positioning with their target, and HorizontalBarChart does not forward
calloutProps at all. Each needs the same one-line merge as DonutChart.

Related Issue(s)

@Cam-Bloom

Copy link
Copy Markdown
Author

@microsoft-github-policy-service agree company="Sir Joseph Isherwood Limited"

@Cam-Bloom
Cameron Bloomfield (Cam-Bloom) marked this pull request as ready for review September 23, 2026 07:14
@Cam-Bloom
Cameron Bloomfield (Cam-Bloom) marked this pull request as draft September 23, 2026 07:15

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant