diff --git a/change/@fluentui-react-charting-3df6df5e-105a-42a8-813e-82c2bb4f5eef.json b/change/@fluentui-react-charting-3df6df5e-105a-42a8-813e-82c2bb4f5eef.json new file mode 100644 index 0000000000000..3442d63093ba0 --- /dev/null +++ b/change/@fluentui-react-charting-3df6df5e-105a-42a8-813e-82c2bb4f5eef.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Fix multi stacked bar chart min width", + "packageName": "@fluentui/react-charting", + "email": "atishay.jain@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index 234b9cd05adea..523d5f5d84d9c 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -140,6 +140,22 @@ export class MultiStackedBarChartBase extends React.Component { + const pointData = point.data ? point.data : 0; + value = (pointData / total) * 100 ? (pointData / total) * 100 : 0; + if (value < 1 && value !== 0) { + value = 1; + } else if (value > 99 && value !== 100) { + value = 99; + } + sumOfPercent += value; + + return sumOfPercent; + }); + + const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1; + let prevPosition = 0; let value = 0; @@ -154,6 +170,13 @@ export class MultiStackedBarChartBase extends React.Component 99 && value !== 100) { + value = 99 / scalingRatio; + } else { + value = value / scalingRatio; + } startingPoint.push(prevPosition);