(fix): VerticalStackedBarChart legend hover opacity not applied to barCornerRadius path elements

[Copilot]

• Fix: Add opacity={shouldHighlight ? 1 : 0.1} to the <path> element in VerticalStackedBarChart.tsx (react-charts) when barCornerRadius is applied
• Verify the same issue does not exist in react-charting (uses CSS class approach which already handles opacity)
• Update snapshots after the fix (only dynamic ID changes from new test data)
• Add test to verify legend hover works with barCornerRadius and zero values
• Run tests to verify fix - all 49 tests pass
• Add beachball change file for @fluentui/react-charts

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Bug]: Legend hover does not highlight bars when barCornerRadius and zero values are present</issue_title>
<issue_description>### Charting Control

VerticalBarChart

Package version

9.3.8

React version

17.0.2

Environment

- React version: 17.0.2
- Browser: Chrome, Edge 
- Operating System: Windows 11
- "@fluentui/react-charts": "9.3.8",
- "@fluentui/react-components": "^9.0.0",

Current Behavior

When barCornerRadius is enabled in VerticalStackedBarChart, hovering over a legend item does not highlight the corresponding bar segment if the stacked bar contains leading zero-value segments.

Expected Behavior

Hovering over a legend item should highlight the corresponding visible bar segment, even when the stacked bar contains leading zero-value segments and barCornerRadius is enabled.

Reproduction

https://stackblitz.com/edit/hfwda8rn?file=src%2Fexample.tsx,package.json

Steps to reproduce

1.Render a VerticalStackedBarChart with barCornerRadius set (for example barCornerRadius={5}).
2. use below data
const data: VerticalStackedChartProps[] = [
{
xAxisPoint: 'Jan',
chartData: [
{ legend: 'Metals', data: 0, color: '#0078D4' },
{ legend: 'Glass', data: 0, color: '#004E8C' },
{ legend: 'Paper', data: 20, color: '#00245B' },
],
},
{
xAxisPoint: 'Feb',
chartData: [
{ legend: 'Metals', data: 0, color: '#0078D4' },
{ legend: 'Glass', data: 0, color: '#004E8C' },
{ legend: 'Paper', data: 10, color: '#00245B' },
],
},
{
xAxisPoint: 'Mar',
chartData: [
{ legend: 'Metals', data: 0, color: '#0078D4' },
{ legend: 'Glass', data: 0, color: '#004E8C' },
{ legend: 'Paper', data: 10, color: '#00245B' },
],
},
{
xAxisPoint: 'Apr',
chartData: [
{ legend: 'Metals', data: 0, color: '#0078D4' },
{ legend: 'Glass', data: 0, color: '#004E8C' },
{ legend: 'Paper', data: 30, color: '#00245B' },
],
},
];

3.Hover over the Paper legend item.
4.The visible bar segment is not highlighted on legend hover.

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [Bug]: Legend hover does not highlight bars when barCornerRadius and zero values are present #35693

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[AtishayMsft]

add a change file to this PR

[AtishayMsft]

@copilot add a change file to this PR

[Copilot]

@copilot add a change file to this PR

Added a patch-type beachball change file for @fluentui/react-charts in commit b63f84f.