Skip to content

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

@Yogitha-Lakshmi-525

Description

@Yogitha-Lakshmi-525

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.

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Todo

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions