-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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.
Metadata
Metadata
Assignees
Type
Projects
Status