From e645d0ec903988d50f72a03048912cb1768dd2ba Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Wed, 28 Jun 2023 09:55:10 +0530
Subject: [PATCH 01/22] focus indicator bug fix in bar chart

---
 .../HorizontalBarChart.base.tsx               | 44 ++++++++++++++--
 .../HorizontalBarChart.styles.ts              |  7 ++-
 .../MultiStackedBarChart.base.tsx             | 51 ++++++++++++++++---
 .../MultiStackedBarChart.styles.ts            |  4 --
 4 files changed, 87 insertions(+), 19 deletions(-)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index d9dbd7ac344252..6aafbb8cd62dd5 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -16,6 +16,7 @@ import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '
 import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
 import { formatPrefix as d3FormatPrefix } from 'd3-format';
 import { FocusableTooltipText } from '../../utilities/FocusableTooltipText';
+import { clamp } from '@fluentui/react';
 
 const getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();
 
@@ -31,6 +32,7 @@ export interface IHorizontalBarChartState {
   barCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
   emptyChart?: boolean;
+  barSpacing: number;
 }
 
 export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {
@@ -41,6 +43,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
   private _refArray: IRefArrayData[];
   private _calloutAnchorPoint: IChartDataPoint | null;
   private _isRTL: boolean = getRTL();
+  private barChartSvgRef: React.RefObject<SVGSVGElement>;
 
   constructor(props: IHorizontalBarChartProps) {
     super(props);
@@ -55,11 +58,13 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       xCalloutValue: '',
       yCalloutValue: '',
       emptyChart: false,
+      barSpacing: 0.5,
     };
     this._refArray = [];
     this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);
     this._hoverOff = this._hoverOff.bind(this);
     this._calloutId = getId('callout');
+    this.barChartSvgRef = React.createRef<SVGSVGElement>();
   }
 
   public componentDidMount(): void {
@@ -67,6 +72,8 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     if (this.state.emptyChart !== isChartEmpty) {
       this.setState({ emptyChart: isChartEmpty });
     }
+
+    this._adjustBarSpacing();
   }
 
   public render(): JSX.Element {
@@ -120,7 +127,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
                 </FocusZone>
                 {points!.chartData![0].data && this._createBenchmark(points!)}
                 <FocusZone direction={FocusZoneDirection.horizontal} className={this._classNames.chartWrapper}>
-                  <svg className={this._classNames.chart} aria-label={points!.chartTitle}>
+                  <svg ref={this.barChartSvgRef} className={this._classNames.chart} aria-label={points!.chartTitle}>
                     <g
                       id={keyVal}
                       key={keyVal}
@@ -175,6 +182,15 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     );
   }
 
+  private _adjustBarSpacing(): void {
+    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width;
+    if (svgWidth) {
+      const BAR_SPACING_FACTOR = 200;
+      const currentBarSpacing = clamp(BAR_SPACING_FACTOR / svgWidth, 1, 0.2);
+      this.setState({ barSpacing: currentBarSpacing });
+    }
+  }
+
   private _refCallback(element: SVGGElement, legendTitle: string | undefined): void {
     this._refArray.push({ index: legendTitle, refElement: element });
   }
@@ -288,19 +304,35 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     );
   }
 
+  /**
+   * The Create bar functions returns an array of <rect> elements, which form the bars
+   * For each bar an x value, and a width needs to be specified
+   * The computations are done based on percentages
+   * Extra margin is also provided, in the x value to provide some spacing
+   */
+
   private _createBars(data: IChartProps, palette: IPalette): JSX.Element[] {
+    const noOfBars =
+      data.chartData?.reduce(
+        (count: number, point: IChartDataPoint) => (count += (point.horizontalBarChartdata?.x || 0) > 0 ? 1 : 0),
+        0,
+      ) || 1;
+    const totalMargin = this.state.barSpacing * (noOfBars - 1);
     const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
     // calculating starting point of each bar and it's range
     const startingPoint: number[] = [];
-    const total = data.chartData!.reduce(
+    let total = data.chartData!.reduce(
       (acc: number, point: IChartDataPoint) =>
         acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),
       0,
     );
+
+    total += (totalMargin * total) / (100 - totalMargin);
+
     let prevPosition = 0;
     let value = 0;
 
-    let sumOfPercent = 0;
+    let sumOfPercent = totalMargin;
     data.chartData!.map((point: IChartDataPoint, index: number) => {
       const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;
       value = (pointData / total) * 100;
@@ -361,7 +393,11 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       return (
         <rect
           key={index}
-          x={`${this._isRTL ? 100 - startingPoint[index] - value : startingPoint[index]}%`}
+          x={`${
+            this._isRTL
+              ? 100 - startingPoint[index] - value - index * this.state.barSpacing
+              : startingPoint[index] + index * this.state.barSpacing
+          }%`}
           y={0}
           data-is-focusable={point.legend !== '' ? true : false}
           width={value + '%'}
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
index af70ce4a1da9f0..bca9eb6fbf0f9d 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
@@ -26,11 +26,10 @@ export const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps
       height: barHeight ? barHeight : 12,
       display: 'block',
       overflow: 'visible',
+      border: theme.palette.white,
+      borderWidth: 2,
     },
-    barWrapper: {
-      stroke: theme.palette.white,
-      strokeWidth: 2,
-    },
+    barWrapper: {},
     chartTitle: {
       ...theme.fonts.small,
       display: 'flex',
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index 4905b1e16ba629..5ad33b45556c89 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
+import { RefObject, classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
 import { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';
 import { ILegend, Legends } from '../Legends/index';
 import {
@@ -16,6 +16,7 @@ import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
 import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';
 import { formatPrefix as d3FormatPrefix } from 'd3-format';
 import { FocusableTooltipText } from '../../utilities/FocusableTooltipText';
+import { clamp } from '@fluentui/react';
 
 const getClassNames = classNamesFunction<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>();
 
@@ -39,6 +40,7 @@ export interface IMultiStackedBarChartState {
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
   emptyChart?: boolean;
+  barSpacing: number;
 }
 
 export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {
@@ -53,6 +55,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
   private _calloutAnchorPoint: IChartDataPoint | null;
   private _longestBarTotalValue: number;
   private _isRTL: boolean = getRTL();
+  private barChartSvgRef: React.RefObject<SVGSVGElement>;
 
   public constructor(props: IMultiStackedBarChartProps) {
     super(props);
@@ -68,10 +71,12 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       yCalloutValue: '',
       calloutLegend: '',
       emptyChart: false,
+      barSpacing: 2,
     };
     this._onLeave = this._onLeave.bind(this);
     this._onBarLeave = this._onBarLeave.bind(this);
     this._calloutId = getId('callout');
+    this.barChartSvgRef = React.createRef<SVGSVGElement>();
   }
 
   public componentDidMount(): void {
@@ -83,6 +88,8 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     if (this.state.emptyChart !== isChartEmpty) {
       this.setState({ emptyChart: isChartEmpty });
     }
+
+    this._adjustBarSpacing();
   }
 
   public render(): JSX.Element {
@@ -151,6 +158,24 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     );
   }
 
+  private _adjustBarSpacing() {
+    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width;
+    if (svgWidth) {
+      const BAR_SPACING_FACTOR = 200;
+
+      // The barspacing is provided in percentage terms, so changes inversely to the width of the svg
+      const currentBarSpacing = clamp(BAR_SPACING_FACTOR / svgWidth, 1, 0.1);
+      this.setState({ barSpacing: currentBarSpacing });
+    }
+  }
+
+  /**
+   * The Create bar functions returns an array of <rect> elements, which form the bars
+   * For each bar an x value, and a width needs to be specified
+   * The computations are done based on percentages
+   * Extra margin is also provided, in the x value to provide some spacing
+   */
+
   private _createBarsAndLegends(
     data: IChartProps,
     barHeight: number,
@@ -159,6 +184,11 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     hideDenominator: boolean,
     href?: string,
   ): JSX.Element {
+    const barSpacing = this.state.barSpacing;
+    const noOfBars =
+      data.chartData?.reduce((count: number, point: IChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||
+      1;
+    const totalMargin = barSpacing * (noOfBars - 1);
     const { culture } = this.props;
     const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
     // calculating starting point of each bar and it's range
@@ -167,10 +197,12 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       (acc: number, point: IChartDataPoint) => acc + (point.data ? point.data : 0),
       0,
     );
-    const total =
+    let total =
       this.props.variant === MultiStackedBarChartVariant.AbsoluteScale ? this._longestBarTotalValue : barTotalValue;
 
-    let sumOfPercent = 0;
+    total += (totalMargin * total) / (100 - totalMargin);
+
+    let sumOfPercent = totalMargin;
     data.chartData!.map((point: IChartDataPoint, index: number) => {
       const pointData = point.data ? point.data : 0;
       value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;
@@ -253,7 +285,11 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
         >
           <rect
             key={index}
-            x={`${this._isRTL ? 100 - startingPoint[index] - value : startingPoint[index]}%`}
+            x={`${
+              this._isRTL
+                ? 100 - startingPoint[index] - value - barSpacing * index
+                : startingPoint[index] + barSpacing * index
+            }%`}
             y={0}
             width={value + '%'}
             height={barHeight}
@@ -269,9 +305,10 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
             key="text"
             x={`${
               this._isRTL
-                ? 100 - (startingPoint[startingPoint.length - 1] || 0) - value
-                : (startingPoint[startingPoint.length - 1] || 0) + value
+                ? 100 - (startingPoint[startingPoint.length - 1] || 0) - value - totalMargin
+                : (startingPoint[startingPoint.length - 1] || 0) + value + totalMargin
             }%`}
+            textAnchor={this._isRTL ? 'end' : 'start'}
             y={barHeight / 2}
             dominantBaseline="central"
             transform={`translate(${this._isRTL ? -4 : 4})`}
@@ -342,7 +379,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
         </FocusZone>
         <FocusZone direction={FocusZoneDirection.horizontal}>
           <div className={this._classNames.chartWrapper}>
-            <svg className={this._classNames.chart} aria-label={data?.chartTitle}>
+            <svg ref={this.barChartSvgRef} className={this._classNames.chart} aria-label={data?.chartTitle}>
               {bars}
             </svg>
           </div>
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
index 39c68270760b95..e571b68a29e660 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
@@ -49,8 +49,6 @@ export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleP
     opacityChangeOnHover: {
       opacity: shouldHighlight ? '' : '0.1',
       cursor: href ? 'pointer' : 'default',
-      stroke: theme.palette.white,
-      strokeWidth: 2,
       selectors: {
         '&:focus': {
           stroke: theme.palette.black,
@@ -70,8 +68,6 @@ export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleP
     placeHolderOnHover: {
       opacity: shouldHighlight ? '' : '0.1',
       cursor: 'default',
-      stroke: theme.palette.white,
-      strokeWidth: '2',
       selectors: {
         '&:focus': {
           stroke: theme.palette.black,

From 543b005b30b27479f2cf4d06f2db3a4b96adbfd0 Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Wed, 28 Jun 2023 14:59:30 +0530
Subject: [PATCH 02/22] added bars spacing adjustment factor

---
 .../HorizontalBarChart.base.tsx               | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index 6aafbb8cd62dd5..291f96ac31c7d3 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -182,15 +182,6 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     );
   }
 
-  private _adjustBarSpacing(): void {
-    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width;
-    if (svgWidth) {
-      const BAR_SPACING_FACTOR = 200;
-      const currentBarSpacing = clamp(BAR_SPACING_FACTOR / svgWidth, 1, 0.2);
-      this.setState({ barSpacing: currentBarSpacing });
-    }
-  }
-
   private _refCallback(element: SVGGElement, legendTitle: string | undefined): void {
     this._refArray.push({ index: legendTitle, refElement: element });
   }
@@ -304,11 +295,21 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     );
   }
 
+  // Adjusts the margin percentage, based on the width of the svg (inversly propotional)
+  private _adjustBarSpacing(): void {
+    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width;
+    if (svgWidth) {
+      const BAR_SPACING_FACTOR = 200;
+      const currentBarSpacing = clamp(BAR_SPACING_FACTOR / svgWidth, 1, 0.2);
+      this.setState({ barSpacing: currentBarSpacing });
+    }
+  }
+
   /**
-   * The Create bar functions returns an array of <rect> elements, which form the bars
+   * This functions returns an array of <rect> elements, which form the bars
    * For each bar an x value, and a width needs to be specified
    * The computations are done based on percentages
-   * Extra margin is also provided, in the x value to provide some spacing
+   * Extra margin is also provided, in the x value to provide some spacing in between the bars
    */
 
   private _createBars(data: IChartProps, palette: IPalette): JSX.Element[] {
@@ -317,7 +318,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
         (count: number, point: IChartDataPoint) => (count += (point.horizontalBarChartdata?.x || 0) > 0 ? 1 : 0),
         0,
       ) || 1;
-    const totalMargin = this.state.barSpacing * (noOfBars - 1);
+    const totalSpacing = this.state.barSpacing * (noOfBars - 1);
     const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
     // calculating starting point of each bar and it's range
     const startingPoint: number[] = [];
@@ -327,12 +328,12 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       0,
     );
 
-    total += (totalMargin * total) / (100 - totalMargin);
+    total += (totalSpacing * total) / (100 - totalSpacing);
 
     let prevPosition = 0;
     let value = 0;
 
-    let sumOfPercent = totalMargin;
+    let sumOfPercent = totalSpacing;
     data.chartData!.map((point: IChartDataPoint, index: number) => {
       const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;
       value = (pointData / total) * 100;

From b31bd7c475843c0bd22be89b104856e6b081770a Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Wed, 28 Jun 2023 15:34:01 +0530
Subject: [PATCH 03/22] resolving eslint issues

---
 .../components/StackedBarChart/MultiStackedBarChart.base.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index 5ad33b45556c89..fde0b850d5f19f 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RefObject, classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
+import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
 import { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';
 import { ILegend, Legends } from '../Legends/index';
 import {

From 9fbe4f329e655349166eda244bb443f566164cea Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Thu, 29 Jun 2023 09:35:31 +0530
Subject: [PATCH 04/22] updated snapshots, for horizontal bar chart and
 multistacked bar chart

---
 .../HorizontalBarChart.test.tsx.snap          | 112 +++++------
 .../MultiStackedBarChart.test.tsx.snap        | 186 ++++++------------
 2 files changed, 104 insertions(+), 194 deletions(-)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index 53719454a46700..8fdf6ab7dd3647 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -122,6 +122,8 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
           className=
 
               {
+                border-width: 2px;
+                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -137,10 +139,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="2020/04/30, 94%."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -150,7 +149,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="10.286666666666665%"
+              width="10.235233333333333%"
               x="0%"
               y={0}
             />
@@ -158,10 +157,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="13457/15000."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -169,8 +165,8 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               onBlur={[Function]}
               onMouseLeave={[Function]}
               role="img"
-              width="89.71333333333334%"
-              x="10.286666666666665%"
+              width="89.26476666666667%"
+              x="10.735233333333333%"
               y={0}
             />
           </g>
@@ -289,6 +285,8 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
           className=
 
               {
+                border-width: 2px;
+                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -304,10 +302,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="2020/04/30, 19%."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}
@@ -317,7 +312,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="5.333333333333334%"
+              width="5.306666666666667%"
               x="0%"
               y={0}
             />
@@ -325,10 +320,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="14200/15000."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -336,8 +328,8 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               onBlur={[Function]}
               onMouseLeave={[Function]}
               role="img"
-              width="94.66666666666667%"
-              x="5.333333333333334%"
+              width="94.19333333333333%"
+              x="5.806666666666667%"
               y={0}
             />
           </g>
@@ -632,6 +624,8 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
           className=
 
               {
+                border-width: 2px;
+                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -647,10 +641,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="2020/04/30, 94%."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -660,7 +651,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="10.286666666666665%"
+              width="10.235233333333333%"
               x="0%"
               y={0}
             />
@@ -668,10 +659,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="13457/15000."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -679,8 +667,8 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               onBlur={[Function]}
               onMouseLeave={[Function]}
               role="img"
-              width="89.71333333333334%"
-              x="10.286666666666665%"
+              width="89.26476666666667%"
+              x="10.735233333333333%"
               y={0}
             />
           </g>
@@ -799,6 +787,8 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
           className=
 
               {
+                border-width: 2px;
+                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -814,10 +804,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="2020/04/30, 19%."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}
@@ -827,7 +814,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="5.333333333333334%"
+              width="5.306666666666667%"
               x="0%"
               y={0}
             />
@@ -835,10 +822,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="14200/15000."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -846,8 +830,8 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               onBlur={[Function]}
               onMouseLeave={[Function]}
               role="img"
-              width="94.66666666666667%"
-              x="5.333333333333334%"
+              width="94.19333333333333%"
+              x="5.806666666666667%"
               y={0}
             />
           </g>
@@ -1049,6 +1033,8 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
           className=
 
               {
+                border-width: 2px;
+                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -1063,10 +1049,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               aria-label="2020/04/30, 94%."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -1075,7 +1058,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="10.286666666666665%"
+              width="10.235233333333333%"
               x="0%"
               y={0}
             />
@@ -1181,6 +1164,8 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
           className=
 
               {
+                border-width: 2px;
+                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -1195,10 +1180,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               aria-label="2020/04/30, 19%."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}
@@ -1207,7 +1189,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="5.333333333333334%"
+              width="5.306666666666667%"
               x="0%"
               y={0}
             />
@@ -1330,6 +1312,8 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
           className=
 
               {
+                border-width: 2px;
+                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -1344,10 +1328,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               aria-label="2020/04/30, 94%."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -1356,7 +1337,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="10.286666666666665%"
+              width="10.235233333333333%"
               x="0%"
               y={0}
             />
@@ -1374,7 +1355,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
                   }
               dominantBaseline="central"
               transform="translate(4)"
-              x="10.286666666666665%"
+              x="10.235233333333333%"
               y={6}
             >
               1.5k
@@ -1480,6 +1461,8 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
           className=
 
               {
+                border-width: 2px;
+                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -1494,10 +1477,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               aria-label="2020/04/30, 19%."
               className=
 
-                  {
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
+
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}
@@ -1506,7 +1486,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="5.333333333333334%"
+              width="5.306666666666667%"
               x="0%"
               y={0}
             />
@@ -1524,7 +1504,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
                   }
               dominantBaseline="central"
               transform="translate(4)"
-              x="5.333333333333334%"
+              x="5.306666666666667%"
               y={6}
             >
               800
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
index 768da972c94ff0..b27d312bc664f5 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
@@ -160,8 +160,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -180,7 +178,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                 fill="#e81123"
                 height={12}
                 key="0"
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -192,8 +190,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -212,8 +208,8 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                 fill="#107c10"
                 height={12}
                 key="1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -366,8 +362,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -386,7 +380,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                 fill="#0078d4"
                 height={12}
                 key="0"
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -398,8 +392,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -418,8 +410,8 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                 fill="#107c10"
                 height={12}
                 key="1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -824,8 +816,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -844,7 +834,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                 fill="#e81123"
                 height={12}
                 key="0"
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -856,8 +846,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -876,8 +864,8 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                 fill="#107c10"
                 height={12}
                 key="1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -1030,8 +1018,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1050,7 +1036,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                 fill="#0078d4"
                 height={12}
                 key="0"
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -1062,8 +1048,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1082,8 +1066,8 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                 fill="#107c10"
                 height={12}
                 key="1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -1379,8 +1363,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1397,7 +1379,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#e81123"
                 height={12}
-                width="63.49206349206349%"
+                width="61.002178649237464%"
                 x="0%"
                 y={0}
               />
@@ -1409,8 +1391,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1427,8 +1407,8 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.07625272331154%"
+                x="63.002178649237464%"
                 y={0}
               />
             </g>
@@ -1553,8 +1533,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1571,7 +1549,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#0078d4"
                 height={12}
-                width="63.49206349206349%"
+                width="61.002178649237464%"
                 x="0%"
                 y={0}
               />
@@ -1583,8 +1561,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1601,8 +1577,8 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.07625272331154%"
+                x="63.002178649237464%"
                 y={0}
               />
             </g>
@@ -1820,8 +1796,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1838,7 +1812,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
               <rect
                 fill="#e81123"
                 height={12}
-                width="63.49206349206349%"
+                width="61.002178649237464%"
                 x="0%"
                 y={0}
               />
@@ -1850,8 +1824,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1868,8 +1840,8 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.07625272331154%"
+                x="63.002178649237464%"
                 y={0}
               />
             </g>
@@ -1884,8 +1856,9 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   }
               dominantBaseline="central"
               role="img"
+              textAnchor="start"
               transform="translate(4)"
-              x="100%"
+              x="98.078431372549%"
               y={6}
             >
               63
@@ -2011,8 +1984,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2029,7 +2000,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
               <rect
                 fill="#0078d4"
                 height={12}
-                width="63.49206349206349%"
+                width="61.002178649237464%"
                 x="0%"
                 y={0}
               />
@@ -2041,8 +2012,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2059,8 +2028,8 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.07625272331154%"
+                x="63.002178649237464%"
                 y={0}
               />
             </g>
@@ -2075,8 +2044,9 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   }
               dominantBaseline="central"
               role="img"
+              textAnchor="start"
               transform="translate(4)"
-              x="100%"
+              x="98.078431372549%"
               y={6}
             >
               63
@@ -2321,8 +2291,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2339,7 +2307,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
               <rect
                 fill="#e81123"
                 height={12}
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -2351,8 +2319,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2369,8 +2335,8 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -2521,8 +2487,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2539,7 +2503,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
               <rect
                 fill="#0078d4"
                 height={12}
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -2551,8 +2515,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2569,8 +2531,8 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -2804,8 +2766,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2822,7 +2782,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               <rect
                 fill="#e81123"
                 height={12}
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -2834,8 +2794,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2852,8 +2810,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -2994,8 +2952,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3012,7 +2968,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               <rect
                 fill="#0078d4"
                 height={12}
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -3024,8 +2980,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3042,8 +2996,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -3287,8 +3241,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3305,7 +3257,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#e81123"
                 height={12}
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -3317,8 +3269,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3335,8 +3285,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -3487,8 +3437,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3505,7 +3453,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#0078d4"
                 height={12}
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -3517,8 +3465,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3535,8 +3481,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -3683,8 +3629,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3701,7 +3645,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#e81123"
                 height={12}
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -3713,8 +3657,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3731,8 +3673,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -3883,8 +3825,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3901,7 +3841,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#0078d4"
                 height={12}
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -3913,8 +3853,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3931,8 +3869,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -4357,8 +4295,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -4375,7 +4311,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#e81123"
                 height={12}
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -4387,8 +4323,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -4405,8 +4339,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -4557,8 +4491,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -4575,7 +4507,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#0078d4"
                 height={12}
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -4587,8 +4519,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -4605,8 +4535,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>

From afb9f64183cf2bc0d51bcf0905cb0514f36bf538 Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Thu, 29 Jun 2023 10:32:20 +0530
Subject: [PATCH 05/22] pixel design issue fixed

---
 .../components/HorizontalBarChart/HorizontalBarChart.styles.ts  | 2 --
 .../components/StackedBarChart/MultiStackedBarChart.styles.ts   | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
index bca9eb6fbf0f9d..72bb1161dfcb17 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
@@ -26,8 +26,6 @@ export const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps
       height: barHeight ? barHeight : 12,
       display: 'block',
       overflow: 'visible',
-      border: theme.palette.white,
-      borderWidth: 2,
     },
     barWrapper: {},
     chartTitle: {
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
index e571b68a29e660..149fbaf0ac6f1b 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
@@ -70,7 +70,7 @@ export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleP
       cursor: 'default',
       selectors: {
         '&:focus': {
-          stroke: theme.palette.black,
+          stroke: theme.palette.blue,
           strokeWidth: '2px',
         },
       },

From ef4a855ab8f0ec1d4c9554ccf975f5de65089d4c Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Thu, 29 Jun 2023 12:05:24 +0530
Subject: [PATCH 06/22] snapshot updated

---
 .../HorizontalBarChart.test.tsx.snap             | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index 8fdf6ab7dd3647..3c0a0b0cb3c6cd 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -122,8 +122,6 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
           className=
 
               {
-                border-width: 2px;
-                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -285,8 +283,6 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
           className=
 
               {
-                border-width: 2px;
-                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -624,8 +620,6 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
           className=
 
               {
-                border-width: 2px;
-                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -787,8 +781,6 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
           className=
 
               {
-                border-width: 2px;
-                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -1033,8 +1025,6 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
           className=
 
               {
-                border-width: 2px;
-                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -1164,8 +1154,6 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
           className=
 
               {
-                border-width: 2px;
-                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -1312,8 +1300,6 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
           className=
 
               {
-                border-width: 2px;
-                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;
@@ -1461,8 +1447,6 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
           className=
 
               {
-                border-width: 2px;
-                border: #ffffff;
                 display: block;
                 height: 12px;
                 overflow: visible;

From 7763568c08319eff1f24dc6243b084d2339cd81d Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Thu, 29 Jun 2023 12:57:53 +0530
Subject: [PATCH 07/22] added change, and fixed stroke thickness in horizontal
 bar chart

---
 ...ct-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json | 7 +++++++
 .../HorizontalBarChart/HorizontalBarChart.styles.ts      | 9 ++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json

diff --git a/change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json b/change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json
new file mode 100644
index 00000000000000..d715f37320cddc
--- /dev/null
+++ b/change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed the focus indicator bug in horizontal bar chart and multi stack bar chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
index 72bb1161dfcb17..a58f7dc4c62ac4 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
@@ -27,7 +27,14 @@ export const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps
       display: 'block',
       overflow: 'visible',
     },
-    barWrapper: {},
+    barWrapper: {
+      selectors: {
+        '&:focus': {
+          stroke: theme.palette.black,
+          strokeWidth: 2,
+        },
+      },
+    },
     chartTitle: {
       ...theme.fonts.small,
       display: 'flex',

From b3c4c41cc264ef0fe1b638b55b23b2d3482186c0 Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Mon, 3 Jul 2023 11:54:56 +0530
Subject: [PATCH 08/22] focus bug fixed

---
 .../HorizontalBarChart.test.tsx.snap          | 60 +++++++++++++++----
 1 file changed, 48 insertions(+), 12 deletions(-)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index 3c0a0b0cb3c6cd..680744f54ccd28 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -137,7 +137,10 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="2020/04/30, 94%."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -155,7 +158,10 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="13457/15000."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -298,7 +304,10 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="2020/04/30, 19%."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}
@@ -316,7 +325,10 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="14200/15000."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -635,7 +647,10 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="2020/04/30, 94%."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -653,7 +668,10 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="13457/15000."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -796,7 +814,10 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="2020/04/30, 19%."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}
@@ -814,7 +835,10 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="14200/15000."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -1039,7 +1063,10 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               aria-label="2020/04/30, 94%."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -1168,7 +1195,10 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               aria-label="2020/04/30, 19%."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}
@@ -1314,7 +1344,10 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               aria-label="2020/04/30, 94%."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -1461,7 +1494,10 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               aria-label="2020/04/30, 19%."
               className=
 
-
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}

From ed3601f2031d78c44cf03cfd1556f1f21bc13197 Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Wed, 12 Jul 2023 15:38:36 +0530
Subject: [PATCH 09/22] added support for dark mode, fixed few PR comments

---
 .../HorizontalBarChart.base.tsx               |  6 +++--
 .../HorizontalBarChart.styles.ts              |  1 +
 .../MultiStackedBarChart.base.tsx             |  5 ++--
 .../MultiStackedBarChart.styles.ts            |  4 ++-
 .../HorizontalBarChart.Basic.Example.tsx      |  8 +++++-
 .../MultiStackedBarChart.Variant.Example.tsx  | 26 +++++++++++--------
 6 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index 291f96ac31c7d3..84eb9ae50ea744 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -299,8 +299,10 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
   private _adjustBarSpacing(): void {
     const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width;
     if (svgWidth) {
-      const BAR_SPACING_FACTOR = 200;
-      const currentBarSpacing = clamp(BAR_SPACING_FACTOR / svgWidth, 1, 0.2);
+      // [0,1] Controls the spacing between the bars
+      const BAR_SPACING_FACTOR = 1;
+      // The barspacing is provided in percentage terms, so changes inversely to the width of the svg
+      const currentBarSpacing = clamp((200 / svgWidth) * BAR_SPACING_FACTOR, 1, 0.2);
       this.setState({ barSpacing: currentBarSpacing });
     }
   }
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
index a58f7dc4c62ac4..14b34dbc83c439 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
@@ -30,6 +30,7 @@ export const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps
     barWrapper: {
       selectors: {
         '&:focus': {
+          outlineColor: theme.palette.black,
           stroke: theme.palette.black,
           strokeWidth: 2,
         },
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index fde0b850d5f19f..1248ec4811da80 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -161,10 +161,9 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
   private _adjustBarSpacing() {
     const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width;
     if (svgWidth) {
-      const BAR_SPACING_FACTOR = 200;
-
+      const BAR_SPACING_FACTOR = 1;
       // The barspacing is provided in percentage terms, so changes inversely to the width of the svg
-      const currentBarSpacing = clamp(BAR_SPACING_FACTOR / svgWidth, 1, 0.1);
+      const currentBarSpacing = clamp((200 / svgWidth) * BAR_SPACING_FACTOR, 1, 0.1);
       this.setState({ barSpacing: currentBarSpacing });
     }
   }
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
index 149fbaf0ac6f1b..9196f30fb847e5 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
@@ -51,6 +51,7 @@ export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleP
       cursor: href ? 'pointer' : 'default',
       selectors: {
         '&:focus': {
+          outlineColor: theme.palette.black,
           stroke: theme.palette.black,
           strokeWidth: '2px',
         },
@@ -70,7 +71,8 @@ export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleP
       cursor: 'default',
       selectors: {
         '&:focus': {
-          stroke: theme.palette.blue,
+          outlineColor: theme.palette.black,
+          stroke: theme.palette.black,
           strokeWidth: '2px',
         },
       },
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
index d876fecad29e4f..70eeaafbf71c03 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { HorizontalBarChart, IChartProps } from '@fluentui/react-charting';
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
+import { ThemeProvider } from '@fluentui/react';
+import { DarkTheme } from '@fluentui/theme-samples';
 
 export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () => {
   const hideRatio: boolean[] = [true, false];
@@ -104,5 +106,9 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () =>
     },
   ];
 
-  return <HorizontalBarChart culture={window.navigator.language} data={data} hideRatio={hideRatio} width={600} />;
+  return (
+    <ThemeProvider theme={DarkTheme}>
+      <HorizontalBarChart culture={window.navigator.language} data={data} hideRatio={hideRatio} width={600} />;
+    </ThemeProvider>
+  );
 };
diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
index d5a1a45e7a4641..1c1e13c0d88eda 100644
--- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
+++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
@@ -6,6 +6,8 @@ import {
   MultiStackedBarChartVariant,
 } from '@fluentui/react-charting';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
+import { ThemeProvider } from '@fluentui/react';
+import { DarkTheme } from '@fluentui/theme-samples';
 
 interface IMSBCVariantExampleState {
   hideLabels: boolean;
@@ -107,17 +109,19 @@ export class MultiStackedBarChartVariantExample extends React.Component<{}, IMSB
 
     return (
       <>
-        <Checkbox
-          label="Hide labels"
-          checked={this.state.hideLabels}
-          onChange={this._onCheckChange}
-          styles={{ root: { marginBottom: '20px' } }}
-        />
-        <MultiStackedBarChart
-          data={data}
-          variant={MultiStackedBarChartVariant.AbsoluteScale}
-          hideLabels={this.state.hideLabels}
-        />
+        <ThemeProvider theme={DarkTheme}>
+          <Checkbox
+            label="Hide labels"
+            checked={this.state.hideLabels}
+            onChange={this._onCheckChange}
+            styles={{ root: { marginBottom: '20px' } }}
+          />
+          <MultiStackedBarChart
+            data={data}
+            variant={MultiStackedBarChartVariant.AbsoluteScale}
+            hideLabels={this.state.hideLabels}
+          />
+        </ThemeProvider>
       </>
     );
   }

From b9b3974fdcf04126b93527fb144341ec40e3eeba Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Wed, 12 Jul 2023 18:50:34 +0530
Subject: [PATCH 10/22] updated snapshots

---
 .../HorizontalBarChart.test.tsx.snap          | 12 +++++++
 .../MultiStackedBarChart.test.tsx.snap        | 36 +++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index 680744f54ccd28..a1cfea4076a421 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -138,6 +138,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -159,6 +160,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -305,6 +307,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -326,6 +329,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -648,6 +652,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -669,6 +674,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -815,6 +821,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -836,6 +843,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1064,6 +1072,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1196,6 +1205,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1345,6 +1355,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1495,6 +1506,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               className=
 
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
index b27d312bc664f5..329f36a33c2c83 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
@@ -162,6 +162,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -192,6 +193,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -364,6 +366,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -394,6 +397,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -818,6 +822,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -848,6 +853,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1020,6 +1026,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1050,6 +1057,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1365,6 +1373,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1393,6 +1402,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1535,6 +1545,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1563,6 +1574,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1798,6 +1810,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1826,6 +1839,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1986,6 +2000,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2014,6 +2029,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2293,6 +2309,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2321,6 +2338,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2489,6 +2507,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2517,6 +2536,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2768,6 +2788,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2796,6 +2817,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2954,6 +2976,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2982,6 +3005,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3243,6 +3267,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3271,6 +3296,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3439,6 +3465,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3467,6 +3494,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3631,6 +3659,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3659,6 +3688,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3827,6 +3857,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3855,6 +3886,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4297,6 +4329,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4325,6 +4358,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4493,6 +4527,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4521,6 +4556,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                     opacity: ;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }

From d85e8f15ba8c57e7661f338523e8ed72d32db11d Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Wed, 12 Jul 2023 18:51:08 +0530
Subject: [PATCH 11/22] removed dark mode

---
 .../HorizontalBarChart.Basic.Example.tsx      |  6 +----
 .../MultiStackedBarChart.Variant.Example.tsx  | 24 +++++++++----------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
index 70eeaafbf71c03..12b22e92147d25 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
@@ -106,9 +106,5 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () =>
     },
   ];
 
-  return (
-    <ThemeProvider theme={DarkTheme}>
-      <HorizontalBarChart culture={window.navigator.language} data={data} hideRatio={hideRatio} width={600} />;
-    </ThemeProvider>
-  );
+  return <HorizontalBarChart culture={window.navigator.language} data={data} hideRatio={hideRatio} width={600} />;
 };
diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
index 1c1e13c0d88eda..dd5d5c35091dba 100644
--- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
+++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
@@ -109,19 +109,17 @@ export class MultiStackedBarChartVariantExample extends React.Component<{}, IMSB
 
     return (
       <>
-        <ThemeProvider theme={DarkTheme}>
-          <Checkbox
-            label="Hide labels"
-            checked={this.state.hideLabels}
-            onChange={this._onCheckChange}
-            styles={{ root: { marginBottom: '20px' } }}
-          />
-          <MultiStackedBarChart
-            data={data}
-            variant={MultiStackedBarChartVariant.AbsoluteScale}
-            hideLabels={this.state.hideLabels}
-          />
-        </ThemeProvider>
+        <Checkbox
+          label="Hide labels"
+          checked={this.state.hideLabels}
+          onChange={this._onCheckChange}
+          styles={{ root: { marginBottom: '20px' } }}
+        />
+        <MultiStackedBarChart
+          data={data}
+          variant={MultiStackedBarChartVariant.AbsoluteScale}
+          hideLabels={this.state.hideLabels}
+        />
       </>
     );
   }

From a11a5c7fa3caabdcf6935b86a640ac0fa30dd83b Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Thu, 13 Jul 2023 11:45:30 +0530
Subject: [PATCH 12/22] fixed linting error

---
 .../HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx    | 2 --
 .../MultiStackedBarChart.Variant.Example.tsx                   | 3 ---
 2 files changed, 5 deletions(-)

diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
index 12b22e92147d25..d876fecad29e4f 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { HorizontalBarChart, IChartProps } from '@fluentui/react-charting';
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
-import { ThemeProvider } from '@fluentui/react';
-import { DarkTheme } from '@fluentui/theme-samples';
 
 export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () => {
   const hideRatio: boolean[] = [true, false];
diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
index dd5d5c35091dba..47478b21ad050c 100644
--- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
+++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
@@ -6,9 +6,6 @@ import {
   MultiStackedBarChartVariant,
 } from '@fluentui/react-charting';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
-import { ThemeProvider } from '@fluentui/react';
-import { DarkTheme } from '@fluentui/theme-samples';
-
 interface IMSBCVariantExampleState {
   hideLabels: boolean;
 }

From b8d4d420d95a248c7ef3612e300ad3668911a4d4 Mon Sep 17 00:00:00 2001
From: yush singla <yuhshsingla@microsoft.com>
Date: Mon, 31 Jul 2023 10:49:08 +0530
Subject: [PATCH 13/22] bar chart fixes

---
 ...i-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json | 2 +-
 .../HorizontalBarChart/HorizontalBarChart.styles.ts           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json b/change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json
index d715f37320cddc..609bfb15d61b81 100644
--- a/change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json
+++ b/change/@fluentui-react-charting-20c8ae70-f2a4-4ef4-89b6-7ca932f7481d.json
@@ -2,6 +2,6 @@
   "type": "patch",
   "comment": "Fixed the focus indicator bug in horizontal bar chart and multi stack bar chart",
   "packageName": "@fluentui/react-charting",
-  "email": "email not defined",
+  "email": "yushsingla@microsoft.com",
   "dependentChangeType": "patch"
 }
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
index 14b34dbc83c439..7250313d30ee09 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
@@ -30,9 +30,9 @@ export const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps
     barWrapper: {
       selectors: {
         '&:focus': {
-          outlineColor: theme.palette.black,
+          outline: 'none',
           stroke: theme.palette.black,
-          strokeWidth: 2,
+          strokeWidth: 1,
         },
       },
     },

From c40c4a0c7d02d8309ad42624afad66161c12117a Mon Sep 17 00:00:00 2001
From: yush singla <yuhshsingla@microsoft.com>
Date: Mon, 31 Jul 2023 11:50:12 +0530
Subject: [PATCH 14/22] fixed the focus indicator width in horizontal bar chart

---
 .../HorizontalBarChart/HorizontalBarChart.styles.ts    | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
index 7250313d30ee09..72bb1161dfcb17 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
@@ -27,15 +27,7 @@ export const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps
       display: 'block',
       overflow: 'visible',
     },
-    barWrapper: {
-      selectors: {
-        '&:focus': {
-          outline: 'none',
-          stroke: theme.palette.black,
-          strokeWidth: 1,
-        },
-      },
-    },
+    barWrapper: {},
     chartTitle: {
       ...theme.fonts.small,
       display: 'flex',

From e4cf583806ee34a7c28fed58a31ab30a4d4e1a2b Mon Sep 17 00:00:00 2001
From: yush singla <yuhshsingla@microsoft.com>
Date: Mon, 31 Jul 2023 15:33:48 +0530
Subject: [PATCH 15/22] updated snapshots

---
 .../HorizontalBarChart.test.tsx.snap          | 72 ++++---------------
 1 file changed, 12 insertions(+), 60 deletions(-)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index a1cfea4076a421..3c0a0b0cb3c6cd 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -137,11 +137,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="2020/04/30, 94%."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -159,11 +155,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="13457/15000."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -306,11 +298,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="2020/04/30, 19%."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}
@@ -328,11 +316,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               aria-label="14200/15000."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -651,11 +635,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="2020/04/30, 94%."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -673,11 +653,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="13457/15000."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -820,11 +796,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="2020/04/30, 19%."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}
@@ -842,11 +814,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               aria-label="14200/15000."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={false}
               fill="#edebe9"
               height={12}
@@ -1071,11 +1039,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               aria-label="2020/04/30, 94%."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -1204,11 +1168,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               aria-label="2020/04/30, 19%."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}
@@ -1354,11 +1314,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               aria-label="2020/04/30, 94%."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={true}
               fill="#004b50"
               height={12}
@@ -1505,11 +1461,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               aria-label="2020/04/30, 19%."
               className=
 
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
+
               data-is-focusable={true}
               fill="#5c2d91"
               height={12}

From 6ee0e2dfa76fe5076977295fe8b9418554d2514f Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Wed, 16 Aug 2023 17:47:01 +0530
Subject: [PATCH 16/22] resolved snapshots

---
 .../MultiStackedBarChart.test.tsx.snap        | 2086 ++---------------
 .../MultiStackedBarChartRTL.test.tsx.snap     |  360 ++-
 2 files changed, 359 insertions(+), 2087 deletions(-)

diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
index b4d0f457c51249..99a3c59feaf5bb 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
@@ -36,8 +36,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-<<<<<<< HEAD
-        data-focuszone-id="FocusZone2"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -81,7 +80,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             </span>
             <div
               hidden={true}
-              id="tooltip3"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -132,7 +131,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -222,216 +221,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
       </div>
     </div>
   </div>
-  <div
-    key="1"
-  >
-    <div
-      className=
-
-          {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 10px;
-            width: 100%;
-          }
-    >
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-=======
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
-        data-focuszone-id="FocusZone5"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                display: flex;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 12px;
-                font-weight: 400;
-                justify-content: space-between;
-              }
-        >
-          <div
-            className=
-                ms-TooltipHost
-                {
-                  color: #323130;
-                  display: block;
-                  margin-bottom: 5px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                }
-            onBlurCapture={[Function]}
-            onFocusCapture={[Function]}
-            onKeyDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            role="none"
-          >
-            <span
-              data-is-focusable={false}
-              role="text"
-            >
-              Monitored
-            </span>
-            <div
-              hidden={true}
-              id="tooltip6"
-              style={
-                Object {
-                  "border": 0,
-                  "height": 1,
-                  "margin": -1,
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": 1,
-                }
-              }
-            >
-              Monitored
-            </div>
-          </div>
-          <div
-            data-is-focusable={false}
-            role="text"
-          >
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                    font-weight: 600;
-                  }
-            >
-              40
-            </span>
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                  }
-            >
-               / 63
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone7"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                padding-right: 0px;
-              }
-        >
-          <svg
-            aria-label="Monitored"
-            className=
-
-                {
-                  display: block;
-                  height: 12px;
-                  overflow: visible;
-                  width: 100%;
-                }
-          >
-            <g
-              aria-label="2020/04/30, 40%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              key="0"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#e81123"
-                height={12}
-                id="_MSBC_rect_2-0"
-                key="0"
-                width="63.49206349206349%"
-                x="0%"
-                y={0}
-              />
-            </g>
-            <g
-              aria-label="2020/04/30, 23%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              key="1"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#107c10"
-                height={12}
-                id="_MSBC_rect_2-1"
-                key="1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
-                y={0}
-              />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
   <div
     id="_MSBC_bar-1"
     key="1"
@@ -595,7 +384,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
               <rect
                 fill="#0078d4"
                 height={12}
-                id="_MSBC_rect_2-0"
                 key="0"
                 width="62.22222222222222%"
                 x="0%"
@@ -627,7 +415,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
               <rect
                 fill="#107c10"
                 height={12}
-                id="_MSBC_rect_2-1"
                 key="1"
                 width="35.77777777777778%"
                 x="64.22222222222223%"
@@ -911,8 +698,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-<<<<<<< HEAD
-        data-focuszone-id="FocusZone2"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -956,7 +742,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             </span>
             <div
               hidden={true}
-              id="tooltip3"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -1007,7 +793,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1098,6 +884,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
     </div>
   </div>
   <div
+    id="_MSBC_bar-1"
     key="1"
   >
     <div
@@ -1116,9 +903,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-=======
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
-        data-focuszone-id="FocusZone5"
+        data-focuszone-id="FocusZone8"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1158,11 +943,11 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
               data-is-focusable={false}
               role="text"
             >
-              Monitored
+              Unmonitored
             </span>
             <div
               hidden={true}
-              id="tooltip6"
+              id="tooltip9"
               style={
                 Object {
                   "border": 0,
@@ -1176,7 +961,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                 }
               }
             >
-              Monitored
+              Unmonitored
             </div>
           </div>
           <div
@@ -1213,7 +998,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone7"
+        data-focuszone-id="FocusZone10"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1226,7 +1011,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
               }
         >
           <svg
-            aria-label="Monitored"
+            aria-label="Unmonitored"
             className=
 
                 {
@@ -1237,16 +1022,15 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                 }
           >
             <g
-              aria-label="2020/04/30, 40%."
+              aria-label="2020/04/30, 87%."
               className=
 
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1260,26 +1044,24 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
               role="img"
             >
               <rect
-                fill="#e81123"
+                fill="#0078d4"
                 height={12}
-                id="_MSBC_rect_2-0"
                 key="0"
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
             </g>
             <g
-              aria-label="2020/04/30, 23%."
+              aria-label="2020/04/30, 87%."
               className=
 
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1295,10 +1077,9 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
               <rect
                 fill="#107c10"
                 height={12}
-                id="_MSBC_rect_2-1"
                 key="1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -1308,232 +1089,25 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
     </div>
   </div>
   <div
-    id="_MSBC_bar-1"
-    key="1"
+    className=
+
+        {
+          margin-bottom: 0px;
+          margin-left: 4px;
+          margin-right: 0px;
+          margin-top: 5px;
+        }
   >
     <div
       className=
 
           {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 10px;
-            width: 100%;
-          }
-    >
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone8"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                display: flex;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 12px;
-                font-weight: 400;
-                justify-content: space-between;
-              }
-        >
-          <div
-            className=
-                ms-TooltipHost
-                {
-                  color: #323130;
-                  display: block;
-                  margin-bottom: 5px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                }
-            onBlurCapture={[Function]}
-            onFocusCapture={[Function]}
-            onKeyDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            role="none"
-          >
-            <span
-              data-is-focusable={false}
-              role="text"
-            >
-              Unmonitored
-            </span>
-            <div
-              hidden={true}
-              id="tooltip9"
-              style={
-                Object {
-                  "border": 0,
-                  "height": 1,
-                  "margin": -1,
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": 1,
-                }
-              }
-            >
-              Unmonitored
-            </div>
-          </div>
-          <div
-            data-is-focusable={false}
-            role="text"
-          >
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                    font-weight: 600;
-                  }
-            >
-              40
-            </span>
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                  }
-            >
-               / 63
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone10"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                padding-right: 0px;
-              }
-        >
-          <svg
-            aria-label="Unmonitored"
-            className=
-
-                {
-                  display: block;
-                  height: 12px;
-                  overflow: visible;
-                  width: 100%;
-                }
-          >
-            <g
-              aria-label="2020/04/30, 87%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              key="0"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#0078d4"
-                height={12}
-                id="_MSBC_rect_2-0"
-                key="0"
-                width="62.22222222222222%"
-                x="0%"
-                y={0}
-              />
-            </g>
-            <g
-              aria-label="2020/04/30, 87%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              key="1"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#107c10"
-                height={12}
-                id="_MSBC_rect_2-1"
-                key="1"
-                width="35.77777777777778%"
-                x="64.22222222222223%"
-                y={0}
-              />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-
-        {
-          margin-bottom: 0px;
-          margin-left: 4px;
-          margin-right: 0px;
-          margin-top: 5px;
-        }
-  >
-    <div
-      className=
-
-          {
-            align-items: center;
-            margin-bottom: 0;
-            margin-left: -8px;
-            margin-right: 0;
-            margin-top: -8px;
-            white-space: nowrap;
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
             width: 100%;
           }
     >
@@ -1820,12 +1394,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#e81123"
                 height={12}
-<<<<<<< HEAD
                 width="61.002178649237464%"
-=======
-                id="_MSBC_rect_73-0"
-                width="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
                 x="0%"
                 y={0}
               />
@@ -1854,14 +1423,8 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#107c10"
                 height={12}
-<<<<<<< HEAD
                 width="35.07625272331154%"
                 x="63.002178649237464%"
-=======
-                id="_MSBC_rect_73-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
                 y={0}
               />
             </g>
@@ -2005,12 +1568,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#0078d4"
                 height={12}
-<<<<<<< HEAD
                 width="61.002178649237464%"
-=======
-                id="_MSBC_rect_73-0"
-                width="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
                 x="0%"
                 y={0}
               />
@@ -2039,14 +1597,8 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#107c10"
                 height={12}
-<<<<<<< HEAD
                 width="35.07625272331154%"
                 x="63.002178649237464%"
-=======
-                id="_MSBC_rect_73-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
                 y={0}
               />
             </g>
@@ -2283,1237 +1835,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
               <rect
                 fill="#e81123"
                 height={12}
-<<<<<<< HEAD
-                width="61.002178649237464%"
-=======
-                id="_MSBC_rect_61-0"
-                width="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
-                x="0%"
-                y={0}
-              />
-            </g>
-            <g
-              aria-label="2020/04/30, 23%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#107c10"
-                height={12}
-<<<<<<< HEAD
-                width="35.07625272331154%"
-                x="63.002178649237464%"
-=======
-                id="_MSBC_rect_61-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
-                y={0}
-              />
-            </g>
-            <text
-              aria-label="Total: 63"
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="central"
-              role="img"
-              textAnchor="start"
-              transform="translate(4)"
-              x="98.078431372549%"
-              y={6}
-            >
-              63
-            </text>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    id="_MSBC_bar-1"
-  >
-    <div
-      className=
-
-          {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 16px;
-            width: 100%;
-          }
-    >
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone67"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                display: flex;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 12px;
-                font-weight: 400;
-                justify-content: space-between;
-              }
-        >
-          <div
-            className=
-                ms-TooltipHost
-                {
-                  color: #323130;
-                  display: block;
-                  margin-bottom: 4px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                }
-            onBlurCapture={[Function]}
-            onFocusCapture={[Function]}
-            onKeyDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            role="none"
-          >
-            <span
-              data-is-focusable={false}
-              role="text"
-            >
-              Unmonitored
-            </span>
-            <div
-              hidden={true}
-              id="tooltip68"
-              style={
-                Object {
-                  "border": 0,
-                  "height": 1,
-                  "margin": -1,
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": 1,
-                }
-              }
-            >
-              Unmonitored
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone69"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                padding-right: 40px;
-              }
-        >
-          <svg
-            aria-label="Unmonitored"
-            className=
-
-                {
-                  display: block;
-                  height: 12px;
-                  overflow: visible;
-                  width: 100%;
-                }
-          >
-            <g
-              aria-label="2020/04/30, 87%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#0078d4"
-                height={12}
-<<<<<<< HEAD
-                width="61.002178649237464%"
-=======
-                id="_MSBC_rect_61-0"
-                width="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
-                x="0%"
-                y={0}
-              />
-            </g>
-            <g
-              aria-label="2020/04/30, 87%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#107c10"
-                height={12}
-<<<<<<< HEAD
-                width="35.07625272331154%"
-                x="63.002178649237464%"
-=======
-                id="_MSBC_rect_61-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
-                y={0}
-              />
-            </g>
-            <text
-              aria-label="Total: 63"
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="central"
-              role="img"
-              textAnchor="start"
-              transform="translate(4)"
-              x="98.078431372549%"
-              y={6}
-            >
-              63
-            </text>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-
-        {
-          margin-bottom: 0px;
-          margin-left: 4px;
-          margin-right: 0px;
-          margin-top: 5px;
-        }
-  >
-    <div
-      className=
-
-          {
-            align-items: center;
-            margin-bottom: 0;
-            margin-left: -8px;
-            margin-right: 0;
-            margin-top: -8px;
-            white-space: nowrap;
-            width: 100%;
-          }
-    >
-      <div>
-        <div
-          style={
-            Object {
-              "position": "relative",
-            }
-          }
-        >
-          <div
-            data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
-          >
-            <div
-              aria-label="Legends"
-              aria-multiselectable={false}
-              className=
-                  ms-FocusZone
-                  &:focus {
-                    outline: none;
-                  }
-              data-focuszone-id="FocusZone70"
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onMouseDownCapture={[Function]}
-              role="listbox"
-            >
-              <div
-                className=
-                    ms-OverflowSet
-                    {
-                      display: flex;
-                      flex-wrap: wrap;
-                      justify-content: unset;
-                      position: relative;
-                    }
-                role="group"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <span
-    className="ms-layer"
-  />
-</div>
-`;
-
-exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart correctly 1`] = `
-<div
-  className=
-      ms-StackedBarChart
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        display: flex;
-        flex-direction: column;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        width: 100%;
-      }
-  onMouseLeave={[Function]}
->
-<<<<<<< HEAD
-  <div>
-    <div
-      className=
-
-          {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 10px;
-            width: 100%;
-          }
-    >
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone2"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                display: flex;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 12px;
-                font-weight: 400;
-                justify-content: space-between;
-              }
-        >
-          <div
-            className=
-                ms-TooltipHost
-                {
-                  color: #323130;
-                  display: block;
-                  margin-bottom: 5px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                }
-            onBlurCapture={[Function]}
-            onFocusCapture={[Function]}
-            onKeyDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            role="none"
-          >
-            <span
-              data-is-focusable={false}
-              role="text"
-            >
-              Monitored
-            </span>
-            <div
-              hidden={true}
-              id="tooltip3"
-              style={
-                Object {
-                  "border": 0,
-                  "height": 1,
-                  "margin": -1,
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": 1,
-                }
-              }
-            >
-              Monitored
-            </div>
-          </div>
-          <div
-            data-is-focusable={false}
-            role="text"
-          >
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                    font-weight: 600;
-                  }
-            >
-              40
-            </span>
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                  }
-            >
-               / 63
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone4"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                padding-right: 0px;
-              }
-        >
-          <svg
-            aria-label="Monitored"
-            className=
-
-                {
-                  display: block;
-                  height: 12px;
-                  overflow: visible;
-                  width: 100%;
-                }
-          >
-            <g
-              aria-label="2020/04/30, 40%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#e81123"
-                height={12}
-                width="62.22222222222222%"
-                x="0%"
-                y={0}
-              />
-            </g>
-            <g
-              aria-label="2020/04/30, 23%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#107c10"
-                height={12}
-                width="35.77777777777778%"
-                x="64.22222222222223%"
-                y={0}
-              />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-=======
-  <div
-    id="_MSBC_bar-0"
-  >
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
-    <div
-      className=
-
-          {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 10px;
-            width: 100%;
-          }
-    >
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone5"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                display: flex;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 12px;
-                font-weight: 400;
-                justify-content: space-between;
-              }
-        >
-          <div
-            className=
-                ms-TooltipHost
-                {
-                  color: #323130;
-                  display: block;
-                  margin-bottom: 5px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                }
-            onBlurCapture={[Function]}
-            onFocusCapture={[Function]}
-            onKeyDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            role="none"
-          >
-            <span
-              data-is-focusable={false}
-              role="text"
-            >
-              Monitored
-            </span>
-            <div
-              hidden={true}
-              id="tooltip6"
-              style={
-                Object {
-                  "border": 0,
-                  "height": 1,
-                  "margin": -1,
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": 1,
-                }
-              }
-            >
-              Monitored
-            </div>
-          </div>
-          <div
-            data-is-focusable={false}
-            role="text"
-          >
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                    font-weight: 600;
-                  }
-            >
-              40
-            </span>
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                  }
-            >
-               / 63
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone7"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                padding-right: 0px;
-              }
-        >
-          <svg
-            aria-label="Monitored"
-            className=
-
-                {
-                  display: block;
-                  height: 12px;
-                  overflow: visible;
-                  width: 100%;
-                }
-          >
-            <g
-              aria-label="2020/04/30, 40%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#e81123"
-                height={12}
-                id="_MSBC_rect_2-0"
-                width="63.49206349206349%"
-                x="0%"
-                y={0}
-              />
-            </g>
-            <g
-              aria-label="2020/04/30, 23%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#107c10"
-                height={12}
-                id="_MSBC_rect_2-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
-                y={0}
-              />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    id="_MSBC_bar-1"
-  >
-    <div
-      className=
-
-          {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 10px;
-            width: 100%;
-          }
-    >
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone8"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                display: flex;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 12px;
-                font-weight: 400;
-                justify-content: space-between;
-              }
-        >
-          <div
-            className=
-                ms-TooltipHost
-                {
-                  color: #323130;
-                  display: block;
-                  margin-bottom: 5px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                }
-            onBlurCapture={[Function]}
-            onFocusCapture={[Function]}
-            onKeyDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            role="none"
-          >
-            <span
-              data-is-focusable={false}
-              role="text"
-            >
-              Unmonitored
-            </span>
-            <div
-              hidden={true}
-              id="tooltip9"
-              style={
-                Object {
-                  "border": 0,
-                  "height": 1,
-                  "margin": -1,
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": 1,
-                }
-              }
-            >
-              Unmonitored
-            </div>
-          </div>
-          <div
-            data-is-focusable={false}
-            role="text"
-          >
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                    font-weight: 600;
-                  }
-            >
-              40
-            </span>
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                  }
-            >
-               / 63
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone10"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                padding-right: 0px;
-              }
-        >
-          <svg
-            aria-label="Unmonitored"
-            className=
-
-                {
-                  display: block;
-                  height: 12px;
-                  overflow: visible;
-                  width: 100%;
-                }
-          >
-            <g
-              aria-label="2020/04/30, 87%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#0078d4"
-                height={12}
-<<<<<<< HEAD
-                width="62.22222222222222%"
-=======
-                id="_MSBC_rect_2-0"
-                width="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
-                x="0%"
-                y={0}
-              />
-            </g>
-            <g
-              aria-label="2020/04/30, 87%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#107c10"
-                height={12}
-<<<<<<< HEAD
-                width="35.77777777777778%"
-                x="64.22222222222223%"
-=======
-                id="_MSBC_rect_2-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
-                y={0}
-              />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-
-        {
-          margin-bottom: 0px;
-          margin-left: 4px;
-          margin-right: 0px;
-          margin-top: 5px;
-        }
-  >
-    <div
-      className=
-
-          {
-            align-items: center;
-            margin-bottom: 0;
-            margin-left: -8px;
-            margin-right: 0;
-            margin-top: -8px;
-            white-space: nowrap;
-            width: 100%;
-          }
-    >
-      <div>
-        <div
-          style={
-            Object {
-              "position": "relative",
-            }
-          }
-        >
-          <div
-            data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
-          >
-            <div
-              aria-label="Legends"
-              aria-multiselectable={false}
-              className=
-                  ms-FocusZone
-                  &:focus {
-                    outline: none;
-                  }
-              data-focuszone-id="FocusZone11"
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onMouseDownCapture={[Function]}
-              role="listbox"
-            >
-              <div
-                className=
-                    ms-OverflowSet
-                    {
-                      display: flex;
-                      flex-wrap: wrap;
-                      justify-content: unset;
-                      position: relative;
-                    }
-                role="group"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <span
-    className="ms-layer"
-  />
-</div>
-`;
-
-exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly 1`] = `
-<div
-  className=
-      ms-StackedBarChart
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        display: flex;
-        flex-direction: column;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        width: 100%;
-      }
-  onMouseLeave={[Function]}
->
-  <div
-    id="_MSBC_bar-0"
-  >
-    <div
-      className=
-
-          {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 10px;
-            width: 100%;
-          }
-    >
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone52"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                display: flex;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 12px;
-                font-weight: 400;
-                justify-content: space-between;
-              }
-        >
-          <div
-            className=
-                ms-TooltipHost
-                {
-                  color: #323130;
-                  display: block;
-                  margin-bottom: 5px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                }
-            onBlurCapture={[Function]}
-            onFocusCapture={[Function]}
-            onKeyDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            role="none"
-          >
-            <span
-              data-is-focusable={false}
-              role="text"
-            >
-              Monitored
-            </span>
-            <div
-              hidden={true}
-              id="tooltip53"
-              style={
-                Object {
-                  "border": 0,
-                  "height": 1,
-                  "margin": -1,
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": 1,
-                }
-              }
-            >
-              Monitored
-            </div>
-          </div>
-          <div
-            data-is-focusable={false}
-            role="text"
-          >
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                    font-weight: 600;
-                  }
-            >
-              40
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone54"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-      >
-        <div
-          className=
-
-              {
-                padding-right: 0px;
-              }
-        >
-          <svg
-            aria-label="Monitored"
-            className=
-
-                {
-                  display: block;
-                  height: 12px;
-                  overflow: visible;
-                  width: 100%;
-                }
-          >
-            <g
-              aria-label="2020/04/30, 40%."
-              className=
-
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #000000;
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable={true}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            >
-              <rect
-                fill="#e81123"
-                height={12}
-<<<<<<< HEAD
-                width="62.22222222222222%"
-=======
-                id="_MSBC_rect_49-0"
-                width="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
+                width="61.002178649237464%"
                 x="0%"
                 y={0}
               />
@@ -3542,17 +1864,29 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               <rect
                 fill="#107c10"
                 height={12}
-<<<<<<< HEAD
-                width="35.77777777777778%"
-                x="64.22222222222223%"
-=======
-                id="_MSBC_rect_49-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
+                width="35.07625272331154%"
+                x="63.002178649237464%"
                 y={0}
               />
             </g>
+            <text
+              aria-label="Total: 63"
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="central"
+              role="img"
+              textAnchor="start"
+              transform="translate(4)"
+              x="98.078431372549%"
+              y={6}
+            >
+              63
+            </text>
           </svg>
         </div>
       </div>
@@ -3567,7 +1901,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
           {
             display: flex;
             flex-direction: column;
-            margin-bottom: 10px;
+            margin-bottom: 16px;
             width: 100%;
           }
     >
@@ -3577,7 +1911,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone55"
+        data-focuszone-id="FocusZone67"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3601,7 +1935,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                 {
                   color: #323130;
                   display: block;
-                  margin-bottom: 5px;
+                  margin-bottom: 4px;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   white-space: nowrap;
@@ -3621,7 +1955,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             </span>
             <div
               hidden={true}
-              id="tooltip56"
+              id="tooltip68"
               style={
                 Object {
                   "border": 0,
@@ -3638,22 +1972,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               Unmonitored
             </div>
           </div>
-          <div
-            data-is-focusable={false}
-            role="text"
-          >
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                    font-weight: 600;
-                  }
-            >
-              40
-            </span>
-          </div>
         </div>
       </div>
       <div
@@ -3662,7 +1980,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone57"
+        data-focuszone-id="FocusZone69"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3671,7 +1989,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
           className=
 
               {
-                padding-right: 0px;
+                padding-right: 40px;
               }
         >
           <svg
@@ -3692,10 +2010,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3710,8 +2027,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               <rect
                 fill="#0078d4"
                 height={12}
-                id="_MSBC_rect_49-0"
-                width="63.49206349206349%"
+                width="61.002178649237464%"
                 x="0%"
                 y={0}
               />
@@ -3723,10 +2039,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3741,12 +2056,29 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               <rect
                 fill="#107c10"
                 height={12}
-                id="_MSBC_rect_49-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.07625272331154%"
+                x="63.002178649237464%"
                 y={0}
               />
             </g>
+            <text
+              aria-label="Total: 63"
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="central"
+              role="img"
+              textAnchor="start"
+              transform="translate(4)"
+              x="98.078431372549%"
+              y={6}
+            >
+              63
+            </text>
           </svg>
         </div>
       </div>
@@ -3800,7 +2132,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone58"
+              data-focuszone-id="FocusZone70"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3829,7 +2161,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
 </div>
 `;
 
-exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`] = `
+exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart correctly 1`] = `
 <div
   className=
       ms-StackedBarChart
@@ -3864,7 +2196,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone17"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3908,7 +2240,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip18"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -3959,7 +2291,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone19"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3989,10 +2321,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4007,8 +2338,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#e81123"
                 height={12}
-                id="_MSBC_rect_14-0"
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -4020,10 +2350,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4038,9 +2367,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-                id="_MSBC_rect_14-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -4068,7 +2396,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone20"
+        data-focuszone-id="FocusZone8"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4112,7 +2440,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip21"
+              id="tooltip9"
               style={
                 Object {
                   "border": 0,
@@ -4163,7 +2491,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone22"
+        data-focuszone-id="FocusZone10"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4193,10 +2521,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4211,8 +2538,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#0078d4"
                 height={12}
-                id="_MSBC_rect_14-0"
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -4224,10 +2550,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4242,9 +2567,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-                id="_MSBC_rect_14-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -4253,13 +2577,84 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
       </div>
     </div>
   </div>
+  <div
+    className=
+
+        {
+          margin-bottom: 0px;
+          margin-left: 4px;
+          margin-right: 0px;
+          margin-top: 5px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <span
     className="ms-layer"
   />
 </div>
 `;
 
-exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] = `
+exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly 1`] = `
 <div
   className=
       ms-StackedBarChart
@@ -4294,7 +2689,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone40"
+        data-focuszone-id="FocusZone52"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4338,7 +2733,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             </span>
             <div
               hidden={true}
-              id="tooltip41"
+              id="tooltip53"
               style={
                 Object {
                   "border": 0,
@@ -4355,6 +2750,22 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               Monitored
             </div>
           </div>
+          <div
+            data-is-focusable={false}
+            role="text"
+          >
+            <span
+              className=
+
+                  {
+                    color: #323130;
+                    font-size: 14px;
+                    font-weight: 600;
+                  }
+            >
+              40
+            </span>
+          </div>
         </div>
       </div>
       <div
@@ -4363,7 +2774,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone42"
+        data-focuszone-id="FocusZone54"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4393,10 +2804,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4411,8 +2821,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#e81123"
                 height={12}
-                id="_MSBC_rect_37-0"
-                width="63.49206349206349%"
+                width="62.22222222222222%"
                 x="0%"
                 y={0}
               />
@@ -4424,10 +2833,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
+                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4442,9 +2850,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#107c10"
                 height={12}
-                id="_MSBC_rect_37-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
+                width="35.77777777777778%"
+                x="64.22222222222223%"
                 y={0}
               />
             </g>
@@ -4472,7 +2879,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone43"
+        data-focuszone-id="FocusZone55"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4516,7 +2923,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             </span>
             <div
               hidden={true}
-              id="tooltip44"
+              id="tooltip56"
               style={
                 Object {
                   "border": 0,
@@ -4548,16 +2955,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             >
               40
             </span>
-            <span
-              className=
-
-                  {
-                    color: #323130;
-                    font-size: 14px;
-                  }
-            >
-               / 63
-            </span>
           </div>
         </div>
       </div>
@@ -4567,7 +2964,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone45"
+        data-focuszone-id="FocusZone57"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4614,12 +3011,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#0078d4"
                 height={12}
-<<<<<<< HEAD
                 width="62.22222222222222%"
-=======
-                id="_MSBC_rect_37-0"
-                width="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
                 x="0%"
                 y={0}
               />
@@ -4648,14 +3040,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#107c10"
                 height={12}
-<<<<<<< HEAD
                 width="35.77777777777778%"
                 x="64.22222222222223%"
-=======
-                id="_MSBC_rect_37-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
                 y={0}
               />
             </g>
@@ -4712,8 +3098,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   &:focus {
                     outline: none;
                   }
-<<<<<<< HEAD
-              data-focuszone-id="FocusZone43"
+              data-focuszone-id="FocusZone58"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4758,7 +3143,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
       }
   onMouseLeave={[Function]}
 >
-  <div>
+  <div
+    id="_MSBC_bar-0"
+  >
     <div
       className=
 
@@ -4775,7 +3162,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone11"
+        data-focuszone-id="FocusZone17"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4819,7 +3206,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip12"
+              id="tooltip18"
               style={
                 Object {
                   "border": 0,
@@ -4870,7 +3257,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone13"
+        data-focuszone-id="FocusZone19"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4956,7 +3343,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
       </div>
     </div>
   </div>
-  <div>
+  <div
+    id="_MSBC_bar-1"
+  >
     <div
       className=
 
@@ -4973,7 +3362,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone14"
+        data-focuszone-id="FocusZone20"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -5017,7 +3406,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip15"
+              id="tooltip21"
               style={
                 Object {
                   "border": 0,
@@ -5068,7 +3457,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone16"
+        data-focuszone-id="FocusZone22"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -5176,7 +3565,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
       }
   onMouseLeave={[Function]}
 >
-  <div>
+  <div
+    id="_MSBC_bar-0"
+  >
     <div
       className=
 
@@ -5193,7 +3584,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone28"
+        data-focuszone-id="FocusZone40"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -5237,7 +3628,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             </span>
             <div
               hidden={true}
-              id="tooltip29"
+              id="tooltip41"
               style={
                 Object {
                   "border": 0,
@@ -5262,7 +3653,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone30"
+        data-focuszone-id="FocusZone42"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -5348,7 +3739,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
       </div>
     </div>
   </div>
-  <div>
+  <div
+    id="_MSBC_bar-1"
+  >
     <div
       className=
 
@@ -5365,7 +3758,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone31"
+        data-focuszone-id="FocusZone43"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -5409,7 +3802,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             </span>
             <div
               hidden={true}
-              id="tooltip32"
+              id="tooltip44"
               style={
                 Object {
                   "border": 0,
@@ -5460,7 +3853,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone33"
+        data-focuszone-id="FocusZone45"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -5594,10 +3987,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone34"
-=======
               data-focuszone-id="FocusZone46"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -5984,12 +4374,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#e81123"
                 height={12}
-<<<<<<< HEAD
                 width="62.22222222222222%"
-=======
-                id="_MSBC_rect_25-0"
-                width="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
                 x="0%"
                 y={0}
               />
@@ -6018,14 +4403,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-<<<<<<< HEAD
                 width="35.77777777777778%"
                 x="64.22222222222223%"
-=======
-                id="_MSBC_rect_25-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
                 y={0}
               />
             </g>
@@ -6195,12 +4574,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#0078d4"
                 height={12}
-<<<<<<< HEAD
                 width="62.22222222222222%"
-=======
-                id="_MSBC_rect_25-0"
-                width="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
                 x="0%"
                 y={0}
               />
@@ -6229,14 +4603,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-<<<<<<< HEAD
                 width="35.77777777777778%"
                 x="64.22222222222223%"
-=======
-                id="_MSBC_rect_25-1"
-                width="36.507936507936506%"
-                x="63.49206349206349%"
->>>>>>> de73662bd4db7d730a3c256d7c900959100f3971
                 y={0}
               />
             </g>
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap
index 465b1ee9d2a070..41b63724ff8836 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap
@@ -114,10 +114,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -128,8 +127,7 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#e81123"
                   height="12"
-                  id="_MSBC_rect_2-0"
-                  width="6.9522899104892675%"
+                  width="6.5590928914086355%"
                   x="0%"
                   y="0"
                 />
@@ -141,10 +139,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -155,9 +152,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#107c10"
                   height="12"
-                  id="_MSBC_rect_2-1"
-                  width="3.997566698531329%"
-                  x="6.9522899104892675%"
+                  width="3.7714784125599654%"
+                  x="8.559092891408635%"
                   y="0"
                 />
               </g>
@@ -168,10 +164,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -182,9 +177,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#ffb900"
                   height="12"
-                  id="_MSBC_rect_2-2"
-                  width="0.9298687755279396%"
-                  x="10.949856609020596%"
+                  width="0.9332751853467075%"
+                  x="14.3305713039686%"
                   y="0"
                 />
               </g>
@@ -195,10 +189,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -209,9 +202,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  id="_MSBC_rect_2-3"
-                  width="15.12123055531416%"
-                  x="11.879725384548536%"
+                  width="14.266027038813782%"
+                  x="17.263846489315306%"
                   y="0"
                 />
               </g>
@@ -222,10 +214,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -236,9 +227,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#000000"
                   height="12"
-                  id="_MSBC_rect_2-4"
-                  width="72.99904406013731%"
-                  x="27.000955939862695%"
+                  width="68.87047535979067%"
+                  x="33.52987352812909%"
                   y="0"
                 />
               </g>
@@ -345,10 +335,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -359,8 +348,7 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#e81123"
                   height="12"
-                  id="_MSBC_rect_2-0"
-                  width="34.14634146341463%"
+                  width="31.414634146341463%"
                   x="0%"
                   y="0"
                 />
@@ -372,10 +360,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -386,9 +373,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#107c10"
                   height="12"
-                  id="_MSBC_rect_2-1"
-                  width="13.658536585365852%"
-                  x="34.14634146341463%"
+                  width="12.565853658536586%"
+                  x="33.41463414634146%"
                   y="0"
                 />
               </g>
@@ -399,10 +385,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -413,9 +398,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#ffb900"
                   height="12"
-                  id="_MSBC_rect_2-2"
-                  width="8.536585365853657%"
-                  x="47.80487804878048%"
+                  width="7.853658536585366%"
+                  x="47.98048780487805%"
                   y="0"
                 />
               </g>
@@ -426,10 +410,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -440,9 +423,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  id="_MSBC_rect_2-3"
-                  width="22.4390243902439%"
-                  x="56.341463414634134%"
+                  width="20.64390243902439%"
+                  x="57.834146341463416%"
                   y="0"
                 />
               </g>
@@ -453,10 +435,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -467,9 +448,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#000000"
                   height="12"
-                  id="_MSBC_rect_2-4"
-                  width="21.219512195121947%"
-                  x="78.78048780487804%"
+                  width="19.521951219512193%"
+                  x="80.47804878048781%"
                   y="0"
                 />
               </g>
@@ -603,10 +583,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -617,8 +596,7 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#0078d4"
                   height="12"
-                  id="_MSBC_rect_2-0"
-                  width="63.49206349206349%"
+                  width="62.22222222222222%"
                   x="0%"
                   y="0"
                 />
@@ -630,10 +608,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -644,9 +621,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#107c10"
                   height="12"
-                  id="_MSBC_rect_2-1"
-                  width="36.507936507936506%"
-                  x="63.49206349206349%"
+                  width="35.77777777777778%"
+                  x="64.22222222222223%"
                   y="0"
                 />
               </g>
@@ -1266,10 +1242,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1280,8 +1255,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#e81123"
                   height="12"
-                  id="_MSBC_rect_176-0"
-                  width="6.9522899104892675%"
+                  width="6.5590928914086355%"
                   x="0%"
                   y="0"
                 />
@@ -1293,10 +1267,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1307,9 +1280,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  id="_MSBC_rect_176-1"
-                  width="3.997566698531329%"
-                  x="6.9522899104892675%"
+                  width="3.7714784125599654%"
+                  x="8.559092891408635%"
                   y="0"
                 />
               </g>
@@ -1320,10 +1292,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1334,9 +1305,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#ffb900"
                   height="12"
-                  id="_MSBC_rect_176-2"
-                  width="0.9298687755279396%"
-                  x="10.949856609020596%"
+                  width="0.9332751853467075%"
+                  x="14.3305713039686%"
                   y="0"
                 />
               </g>
@@ -1347,10 +1317,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1361,9 +1330,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  id="_MSBC_rect_176-3"
-                  width="15.12123055531416%"
-                  x="11.879725384548536%"
+                  width="14.266027038813782%"
+                  x="17.263846489315306%"
                   y="0"
                 />
               </g>
@@ -1374,10 +1342,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1388,9 +1355,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#000000"
                   height="12"
-                  id="_MSBC_rect_176-4"
-                  width="72.99904406013731%"
-                  x="27.000955939862695%"
+                  width="68.87047535979067%"
+                  x="33.52987352812909%"
                   y="0"
                 />
               </g>
@@ -1497,10 +1463,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1511,8 +1476,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#e81123"
                   height="12"
-                  id="_MSBC_rect_176-0"
-                  width="34.14634146341463%"
+                  width="31.414634146341463%"
                   x="0%"
                   y="0"
                 />
@@ -1524,10 +1488,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1538,9 +1501,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  id="_MSBC_rect_176-1"
-                  width="13.658536585365852%"
-                  x="34.14634146341463%"
+                  width="12.565853658536586%"
+                  x="33.41463414634146%"
                   y="0"
                 />
               </g>
@@ -1551,10 +1513,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1565,9 +1526,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#ffb900"
                   height="12"
-                  id="_MSBC_rect_176-2"
-                  width="8.536585365853657%"
-                  x="47.80487804878048%"
+                  width="7.853658536585366%"
+                  x="47.98048780487805%"
                   y="0"
                 />
               </g>
@@ -1578,10 +1538,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1592,9 +1551,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  id="_MSBC_rect_176-3"
-                  width="22.4390243902439%"
-                  x="56.341463414634134%"
+                  width="20.64390243902439%"
+                  x="57.834146341463416%"
                   y="0"
                 />
               </g>
@@ -1605,10 +1563,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1619,9 +1576,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#000000"
                   height="12"
-                  id="_MSBC_rect_176-4"
-                  width="21.219512195121947%"
-                  x="78.78048780487804%"
+                  width="19.521951219512193%"
+                  x="80.47804878048781%"
                   y="0"
                 />
               </g>
@@ -1755,10 +1711,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1769,8 +1724,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#0078d4"
                   height="12"
-                  id="_MSBC_rect_176-0"
-                  width="63.49206349206349%"
+                  width="62.22222222222222%"
                   x="0%"
                   y="0"
                 />
@@ -1782,10 +1736,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1796,9 +1749,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  id="_MSBC_rect_176-1"
-                  width="36.507936507936506%"
-                  x="63.49206349206349%"
+                  width="35.77777777777778%"
+                  x="64.22222222222223%"
                   y="0"
                 />
               </g>
@@ -2418,10 +2370,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2432,8 +2383,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#e81123"
                   height="12"
-                  id="_MSBC_rect_191-0"
-                  width="6.9522899104892675%"
+                  width="6.5590928914086355%"
                   x="0%"
                   y="0"
                 />
@@ -2445,10 +2395,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2459,9 +2408,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  id="_MSBC_rect_191-1"
-                  width="3.997566698531329%"
-                  x="6.9522899104892675%"
+                  width="3.7714784125599654%"
+                  x="8.559092891408635%"
                   y="0"
                 />
               </g>
@@ -2472,10 +2420,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2486,9 +2433,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#ffb900"
                   height="12"
-                  id="_MSBC_rect_191-2"
-                  width="0.9298687755279396%"
-                  x="10.949856609020596%"
+                  width="0.9332751853467075%"
+                  x="14.3305713039686%"
                   y="0"
                 />
               </g>
@@ -2499,10 +2445,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2513,9 +2458,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  id="_MSBC_rect_191-3"
-                  width="15.12123055531416%"
-                  x="11.879725384548536%"
+                  width="14.266027038813782%"
+                  x="17.263846489315306%"
                   y="0"
                 />
               </g>
@@ -2526,10 +2470,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2540,9 +2483,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#000000"
                   height="12"
-                  id="_MSBC_rect_191-4"
-                  width="72.99904406013731%"
-                  x="27.000955939862695%"
+                  width="68.87047535979067%"
+                  x="33.52987352812909%"
                   y="0"
                 />
               </g>
@@ -2649,10 +2591,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2663,8 +2604,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#e81123"
                   height="12"
-                  id="_MSBC_rect_191-0"
-                  width="34.14634146341463%"
+                  width="31.414634146341463%"
                   x="0%"
                   y="0"
                 />
@@ -2676,10 +2616,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2690,9 +2629,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  id="_MSBC_rect_191-1"
-                  width="13.658536585365852%"
-                  x="34.14634146341463%"
+                  width="12.565853658536586%"
+                  x="33.41463414634146%"
                   y="0"
                 />
               </g>
@@ -2703,10 +2641,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2717,9 +2654,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#ffb900"
                   height="12"
-                  id="_MSBC_rect_191-2"
-                  width="8.536585365853657%"
-                  x="47.80487804878048%"
+                  width="7.853658536585366%"
+                  x="47.98048780487805%"
                   y="0"
                 />
               </g>
@@ -2730,10 +2666,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2744,9 +2679,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  id="_MSBC_rect_191-3"
-                  width="22.4390243902439%"
-                  x="56.341463414634134%"
+                  width="20.64390243902439%"
+                  x="57.834146341463416%"
                   y="0"
                 />
               </g>
@@ -2757,10 +2691,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2771,9 +2704,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#000000"
                   height="12"
-                  id="_MSBC_rect_191-4"
-                  width="21.219512195121947%"
-                  x="78.78048780487804%"
+                  width="19.521951219512193%"
+                  x="80.47804878048781%"
                   y="0"
                 />
               </g>
@@ -2907,10 +2839,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2921,8 +2852,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#0078d4"
                   height="12"
-                  id="_MSBC_rect_191-0"
-                  width="63.49206349206349%"
+                  width="62.22222222222222%"
                   x="0%"
                   y="0"
                 />
@@ -2934,10 +2864,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
+                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2948,9 +2877,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  id="_MSBC_rect_191-1"
-                  width="36.507936507936506%"
-                  x="63.49206349206349%"
+                  width="35.77777777777778%"
+                  x="64.22222222222223%"
                   y="0"
                 />
               </g>
@@ -3583,10 +3511,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3597,8 +3524,7 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#e81123"
                     height="12"
-                    id="_MSBC_rect_209-0"
-                    width="6.9522899104892675%"
+                    width="6.5590928914086355%"
                     x="0%"
                     y="0"
                   />
@@ -3610,10 +3536,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3624,9 +3549,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#107c10"
                     height="12"
-                    id="_MSBC_rect_209-1"
-                    width="3.997566698531329%"
-                    x="6.9522899104892675%"
+                    width="3.7714784125599654%"
+                    x="8.559092891408635%"
                     y="0"
                   />
                 </g>
@@ -3637,10 +3561,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3651,9 +3574,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#ffb900"
                     height="12"
-                    id="_MSBC_rect_209-2"
-                    width="0.9298687755279396%"
-                    x="10.949856609020596%"
+                    width="0.9332751853467075%"
+                    x="14.3305713039686%"
                     y="0"
                   />
                 </g>
@@ -3664,10 +3586,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3678,9 +3599,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#00bcf2"
                     height="12"
-                    id="_MSBC_rect_209-3"
-                    width="15.12123055531416%"
-                    x="11.879725384548536%"
+                    width="14.266027038813782%"
+                    x="17.263846489315306%"
                     y="0"
                   />
                 </g>
@@ -3691,10 +3611,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3705,9 +3624,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#000000"
                     height="12"
-                    id="_MSBC_rect_209-4"
-                    width="72.99904406013731%"
-                    x="27.000955939862695%"
+                    width="68.87047535979067%"
+                    x="33.52987352812909%"
                     y="0"
                   />
                 </g>
@@ -3814,10 +3732,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3828,8 +3745,7 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#e81123"
                     height="12"
-                    id="_MSBC_rect_209-0"
-                    width="34.14634146341463%"
+                    width="31.414634146341463%"
                     x="0%"
                     y="0"
                   />
@@ -3841,10 +3757,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3855,9 +3770,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#107c10"
                     height="12"
-                    id="_MSBC_rect_209-1"
-                    width="13.658536585365852%"
-                    x="34.14634146341463%"
+                    width="12.565853658536586%"
+                    x="33.41463414634146%"
                     y="0"
                   />
                 </g>
@@ -3868,10 +3782,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3882,9 +3795,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#ffb900"
                     height="12"
-                    id="_MSBC_rect_209-2"
-                    width="8.536585365853657%"
-                    x="47.80487804878048%"
+                    width="7.853658536585366%"
+                    x="47.98048780487805%"
                     y="0"
                   />
                 </g>
@@ -3895,10 +3807,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3909,9 +3820,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#00bcf2"
                     height="12"
-                    id="_MSBC_rect_209-3"
-                    width="22.4390243902439%"
-                    x="56.341463414634134%"
+                    width="20.64390243902439%"
+                    x="57.834146341463416%"
                     y="0"
                   />
                 </g>
@@ -3922,10 +3832,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3936,9 +3845,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#000000"
                     height="12"
-                    id="_MSBC_rect_209-4"
-                    width="21.219512195121947%"
-                    x="78.78048780487804%"
+                    width="19.521951219512193%"
+                    x="80.47804878048781%"
                     y="0"
                   />
                 </g>
@@ -4072,10 +3980,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -4086,8 +3993,7 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#0078d4"
                     height="12"
-                    id="_MSBC_rect_209-0"
-                    width="63.49206349206349%"
+                    width="62.22222222222222%"
                     x="0%"
                     y="0"
                   />
@@ -4099,10 +4005,9 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
+                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -4113,9 +4018,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#107c10"
                     height="12"
-                    id="_MSBC_rect_209-1"
-                    width="36.507936507936506%"
-                    x="63.49206349206349%"
+                    width="35.77777777777778%"
+                    x="64.22222222222223%"
                     y="0"
                   />
                 </g>

From 9104dd526835a6944e06192df760680ea8f00237 Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Thu, 17 Aug 2023 17:36:55 +0530
Subject: [PATCH 17/22] fixed the focus indicator bug with different
 mathematical approach

---
 .../HorizontalBarChart.base.tsx               |  53 ++---
 .../HorizontalBarChart.test.tsx.snap          |  36 +--
 .../MultiStackedBarChart.base.tsx             |  55 ++---
 .../MultiStackedBarChart.test.tsx.snap        | 148 +++++++-----
 .../MultiStackedBarChartRTL.test.tsx.snap     | 216 +++++++++++-------
 .../MultiStackedBarChart.Example.tsx          |  60 ++++-
 .../MultiStackedBarChart.Variant.Example.tsx  |   1 +
 .../MultiStackedBarChartPage.tsx              |   4 +-
 8 files changed, 352 insertions(+), 221 deletions(-)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index 7793012e6ceaae..865275caf4b759 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -16,7 +16,6 @@ import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '
 import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
 import { formatPrefix as d3FormatPrefix } from 'd3-format';
 import { FocusableTooltipText } from '../../utilities/FocusableTooltipText';
-import { clamp } from '@fluentui/react';
 
 const getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();
 
@@ -31,7 +30,7 @@ export interface IHorizontalBarChartState {
   yCalloutValue?: string;
   barCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
-  barSpacing: number;
+  barSpacingInPercent: number;
 }
 
 export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {
@@ -57,7 +56,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       color: '',
       xCalloutValue: '',
       yCalloutValue: '',
-      barSpacing: 0.5,
+      barSpacingInPercent: 0,
     };
     this._refArray = [];
     this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);
@@ -68,7 +67,12 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
   }
 
   public componentDidMount(): void {
-    this._adjustBarSpacing();
+    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width || 0;
+    const MARGIN_WIDTH_IN_PX = 2;
+    if (svgWidth) {
+      const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
+      this.setState({ barSpacingInPercent: currentBarSpacing });
+    }
   }
 
   public render(): JSX.Element {
@@ -295,18 +299,6 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     );
   }
 
-  // Adjusts the margin percentage, based on the width of the svg (inversly propotional)
-  private _adjustBarSpacing(): void {
-    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width;
-    if (svgWidth) {
-      // [0,1] Controls the spacing between the bars
-      const BAR_SPACING_FACTOR = 1;
-      // The barspacing is provided in percentage terms, so changes inversely to the width of the svg
-      const currentBarSpacing = clamp((200 / svgWidth) * BAR_SPACING_FACTOR, 1, 0.2);
-      this.setState({ barSpacing: currentBarSpacing });
-    }
-  }
-
   /**
    * This functions returns an array of <rect> elements, which form the bars
    * For each bar an x value, and a width needs to be specified
@@ -316,26 +308,21 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
 
   private _createBars(data: IChartProps, palette: IPalette): JSX.Element[] {
     const noOfBars =
-      data.chartData?.reduce(
-        (count: number, point: IChartDataPoint) => (count += (point.horizontalBarChartdata?.x || 0) > 0 ? 1 : 0),
-        0,
-      ) || 1;
-    const totalSpacing = this.state.barSpacing * (noOfBars - 1);
+      data.chartData?.reduce((count: number, point: IChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||
+      1;
+    const totalMarginPercent = this.state.barSpacingInPercent * (noOfBars - 1);
     const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
     // calculating starting point of each bar and it's range
     const startingPoint: number[] = [];
-    let total = data.chartData!.reduce(
+    const total = data.chartData!.reduce(
       (acc: number, point: IChartDataPoint) =>
         acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),
       0,
     );
-
-    total += (totalSpacing * total) / (100 - totalSpacing);
-
     let prevPosition = 0;
     let value = 0;
 
-    let sumOfPercent = totalSpacing;
+    let sumOfPercent = 0;
     data.chartData!.map((point: IChartDataPoint, index: number) => {
       const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;
       value = (pointData / total) * 100;
@@ -349,7 +336,15 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       return sumOfPercent;
     });
 
-    const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
+    /**
+     * The %age of the space occupied by the margin needs to subtracted
+     * while computing the scaling ratio, since the margins are not being
+     * scaled down, only the data is being scaled down from a higher percentage to lower percentage
+     * Eg: 95% of the space is taken by the bars, 5% by the margins
+     * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%
+     * since that's only space available to the bars
+     */
+    const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;
 
     const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {
       const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
@@ -398,8 +393,8 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
           key={index}
           x={`${
             this._isRTL
-              ? 100 - startingPoint[index] - value - index * this.state.barSpacing
-              : startingPoint[index] + index * this.state.barSpacing
+              ? 100 - startingPoint[index] - value - index * this.state.barSpacingInPercent
+              : startingPoint[index] + index * this.state.barSpacingInPercent
           }%`}
           y={0}
           data-is-focusable={point.legend !== '' ? true : false}
diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index a64f8ecdfa1ae1..a4730971e4a96c 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -147,7 +147,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="10.235233333333333%"
+              width="10.286666666666665%"
               x="0%"
               y={0}
             />
@@ -163,8 +163,8 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               onBlur={[Function]}
               onMouseLeave={[Function]}
               role="img"
-              width="89.26476666666667%"
-              x="10.735233333333333%"
+              width="89.71333333333334%"
+              x="10.286666666666665%"
               y={0}
             />
           </g>
@@ -308,7 +308,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="5.306666666666667%"
+              width="5.333333333333334%"
               x="0%"
               y={0}
             />
@@ -324,8 +324,8 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
               onBlur={[Function]}
               onMouseLeave={[Function]}
               role="img"
-              width="94.19333333333333%"
-              x="5.806666666666667%"
+              width="94.66666666666667%"
+              x="5.333333333333334%"
               y={0}
             />
           </g>
@@ -645,7 +645,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="10.235233333333333%"
+              width="10.286666666666665%"
               x="0%"
               y={0}
             />
@@ -661,8 +661,8 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               onBlur={[Function]}
               onMouseLeave={[Function]}
               role="img"
-              width="89.26476666666667%"
-              x="10.735233333333333%"
+              width="89.71333333333334%"
+              x="10.286666666666665%"
               y={0}
             />
           </g>
@@ -806,7 +806,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="5.306666666666667%"
+              width="5.333333333333334%"
               x="0%"
               y={0}
             />
@@ -822,8 +822,8 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
               onBlur={[Function]}
               onMouseLeave={[Function]}
               role="img"
-              width="94.19333333333333%"
-              x="5.806666666666667%"
+              width="94.66666666666667%"
+              x="5.333333333333334%"
               y={0}
             />
           </g>
@@ -1048,7 +1048,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="10.235233333333333%"
+              width="10.286666666666665%"
               x="0%"
               y={0}
             />
@@ -1177,7 +1177,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="5.306666666666667%"
+              width="5.333333333333334%"
               x="0%"
               y={0}
             />
@@ -1323,7 +1323,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="10.235233333333333%"
+              width="10.286666666666665%"
               x="0%"
               y={0}
             />
@@ -1341,7 +1341,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
                   }
               dominantBaseline="central"
               transform="translate(4)"
-              x="10.235233333333333%"
+              x="10.286666666666665%"
               y={6}
             >
               1.5k
@@ -1470,7 +1470,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
               onMouseLeave={[Function]}
               onMouseOver={[Function]}
               role="img"
-              width="5.306666666666667%"
+              width="5.333333333333334%"
               x="0%"
               y={0}
             />
@@ -1488,7 +1488,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
                   }
               dominantBaseline="central"
               transform="translate(4)"
-              x="5.306666666666667%"
+              x="5.333333333333334%"
               y={6}
             >
               800
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index a3ef0842b62816..b146329ae073dc 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -16,7 +16,6 @@ import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
 import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';
 import { formatPrefix as d3FormatPrefix } from 'd3-format';
 import { FocusableTooltipText } from '../../utilities/FocusableTooltipText';
-import { clamp } from '@fluentui/react';
 
 const getClassNames = classNamesFunction<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>();
 
@@ -40,7 +39,7 @@ export interface IMultiStackedBarChartState {
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
   emptyChart?: boolean;
-  barSpacing: number;
+  barSpacingInPercent: number;
 }
 
 export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {
@@ -75,7 +74,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       yCalloutValue: '',
       calloutLegend: '',
       emptyChart: false,
-      barSpacing: 2,
+      barSpacingInPercent: 0,
     };
     this._onLeave = this._onLeave.bind(this);
     this._onBarLeave = this._onBarLeave.bind(this);
@@ -88,7 +87,12 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
   }
 
   public componentDidMount(): void {
-    this._adjustBarSpacing();
+    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width || 0;
+    const MARGIN_WIDTH_IN_PX = 2;
+    if (svgWidth) {
+      const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
+      this.setState({ barSpacingInPercent: currentBarSpacing });
+    }
   }
 
   public render(): JSX.Element {
@@ -166,16 +170,6 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     );
   }
 
-  private _adjustBarSpacing() {
-    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width;
-    if (svgWidth) {
-      const BAR_SPACING_FACTOR = 1;
-      // The barspacing is provided in percentage terms, so changes inversely to the width of the svg
-      const currentBarSpacing = clamp((200 / svgWidth) * BAR_SPACING_FACTOR, 1, 0.1);
-      this.setState({ barSpacing: currentBarSpacing });
-    }
-  }
-
   /**
    * The Create bar functions returns an array of <rect> elements, which form the bars
    * For each bar an x value, and a width needs to be specified
@@ -191,11 +185,10 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     hideDenominator: boolean,
     href?: string,
   ): JSX.Element {
-    const barSpacing = this.state.barSpacing;
     const noOfBars =
       data.chartData?.reduce((count: number, point: IChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||
       1;
-    const totalMargin = barSpacing * (noOfBars - 1);
+    const totalMarginPercent = this.state.barSpacingInPercent * (noOfBars - 1);
     const { culture } = this.props;
     const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
     // calculating starting point of each bar and it's range
@@ -204,15 +197,15 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       (acc: number, point: IChartDataPoint) => acc + (point.data ? point.data : 0),
       0,
     );
-    let total =
+    const total =
       this.props.variant === MultiStackedBarChartVariant.AbsoluteScale ? this._longestBarTotalValue : barTotalValue;
 
-    total += (totalMargin * total) / (100 - totalMargin);
-
-    let sumOfPercent = totalMargin;
+    let sumOfPercent = 0;
     data.chartData!.map((point: IChartDataPoint, index: number) => {
       const pointData = point.data ? point.data : 0;
-      value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;
+      const currValue = (pointData / total) * 100;
+      value = currValue ? currValue : 0;
+
       if (value < 1 && value !== 0) {
         value = 1;
       } else if (value > 99 && value !== 100) {
@@ -236,7 +229,16 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       sumOfPercent += value;
     }
 
-    const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
+    /**
+     * The %age of the space occupied by the margin needs to subtracted
+     * while computing the scaling ratio, since the margins are not being
+     * scaled down, only the data is being scaled down from a higher percentage to lower percentage
+     * Eg: 95% of the space is taken by the bars, 5% by the margins
+     * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%
+     * since that's only space available to the bars
+     */
+
+    const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / (100 - totalMarginPercent) : 1;
 
     let prevPosition = 0;
     let value = 0;
@@ -291,10 +293,11 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
         >
           <rect
             key={index}
+            id={`${this._barId}-${index}`}
             x={`${
               this._isRTL
-                ? 100 - startingPoint[index] - value - barSpacing * index
-                : startingPoint[index] + barSpacing * index
+                ? 100 - startingPoint[index] - value - this.state.barSpacingInPercent * index
+                : startingPoint[index] + this.state.barSpacingInPercent * index
             }%`}
             y={0}
             width={value + '%'}
@@ -311,8 +314,8 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
             key="text"
             x={`${
               this._isRTL
-                ? 100 - (startingPoint[startingPoint.length - 1] || 0) - value - totalMargin
-                : (startingPoint[startingPoint.length - 1] || 0) + value + totalMargin
+                ? 100 - (startingPoint[startingPoint.length - 1] || 0) - value - totalMarginPercent
+                : (startingPoint[startingPoint.length - 1] || 0) + value + totalMarginPercent
             }%`}
             textAnchor={this._isRTL ? 'end' : 'start'}
             y={barHeight / 2}
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
index 99a3c59feaf5bb..a1e378fd01d8a0 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
@@ -179,8 +179,9 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
               <rect
                 fill="#e81123"
                 height={12}
+                id="_MSBC_rect_2-0"
                 key="0"
-                width="62.22222222222222%"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -210,9 +211,10 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
               <rect
                 fill="#107c10"
                 height={12}
+                id="_MSBC_rect_2-1"
                 key="1"
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -384,8 +386,9 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
               <rect
                 fill="#0078d4"
                 height={12}
+                id="_MSBC_rect_2-0"
                 key="0"
-                width="62.22222222222222%"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -415,9 +418,10 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
               <rect
                 fill="#107c10"
                 height={12}
+                id="_MSBC_rect_2-1"
                 key="1"
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -841,8 +845,9 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
               <rect
                 fill="#e81123"
                 height={12}
+                id="_MSBC_rect_2-0"
                 key="0"
-                width="62.22222222222222%"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -872,9 +877,10 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
               <rect
                 fill="#107c10"
                 height={12}
+                id="_MSBC_rect_2-1"
                 key="1"
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -1046,8 +1052,9 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
               <rect
                 fill="#0078d4"
                 height={12}
+                id="_MSBC_rect_2-0"
                 key="0"
-                width="62.22222222222222%"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -1077,9 +1084,10 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
               <rect
                 fill="#107c10"
                 height={12}
+                id="_MSBC_rect_2-1"
                 key="1"
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -1394,7 +1402,8 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#e81123"
                 height={12}
-                width="61.002178649237464%"
+                id="_MSBC_rect_73-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -1423,8 +1432,9 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.07625272331154%"
-                x="63.002178649237464%"
+                id="_MSBC_rect_73-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -1568,7 +1578,8 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#0078d4"
                 height={12}
-                width="61.002178649237464%"
+                id="_MSBC_rect_73-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -1597,8 +1608,9 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.07625272331154%"
-                x="63.002178649237464%"
+                id="_MSBC_rect_73-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -1835,7 +1847,8 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
               <rect
                 fill="#e81123"
                 height={12}
-                width="61.002178649237464%"
+                id="_MSBC_rect_61-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -1864,8 +1877,9 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.07625272331154%"
-                x="63.002178649237464%"
+                id="_MSBC_rect_61-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -1882,7 +1896,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
               role="img"
               textAnchor="start"
               transform="translate(4)"
-              x="98.078431372549%"
+              x="100%"
               y={6}
             >
               63
@@ -2027,7 +2041,8 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
               <rect
                 fill="#0078d4"
                 height={12}
-                width="61.002178649237464%"
+                id="_MSBC_rect_61-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -2056,8 +2071,9 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.07625272331154%"
-                x="63.002178649237464%"
+                id="_MSBC_rect_61-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -2074,7 +2090,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
               role="img"
               textAnchor="start"
               transform="translate(4)"
-              x="98.078431372549%"
+              x="100%"
               y={6}
             >
               63
@@ -2338,7 +2354,8 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
               <rect
                 fill="#e81123"
                 height={12}
-                width="62.22222222222222%"
+                id="_MSBC_rect_2-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -2367,8 +2384,9 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                id="_MSBC_rect_2-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -2538,7 +2556,8 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
               <rect
                 fill="#0078d4"
                 height={12}
-                width="62.22222222222222%"
+                id="_MSBC_rect_2-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -2567,8 +2586,9 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                id="_MSBC_rect_2-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -2821,7 +2841,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               <rect
                 fill="#e81123"
                 height={12}
-                width="62.22222222222222%"
+                id="_MSBC_rect_49-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -2850,8 +2871,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                id="_MSBC_rect_49-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -3011,7 +3033,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               <rect
                 fill="#0078d4"
                 height={12}
-                width="62.22222222222222%"
+                id="_MSBC_rect_49-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -3040,8 +3063,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                id="_MSBC_rect_49-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -3304,7 +3328,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#e81123"
                 height={12}
-                width="62.22222222222222%"
+                id="_MSBC_rect_14-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -3333,8 +3358,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                id="_MSBC_rect_14-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -3504,7 +3530,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#0078d4"
                 height={12}
-                width="62.22222222222222%"
+                id="_MSBC_rect_14-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -3533,8 +3560,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                id="_MSBC_rect_14-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -3700,7 +3728,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#e81123"
                 height={12}
-                width="62.22222222222222%"
+                id="_MSBC_rect_37-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -3729,8 +3758,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                id="_MSBC_rect_37-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -3900,7 +3930,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#0078d4"
                 height={12}
-                width="62.22222222222222%"
+                id="_MSBC_rect_37-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -3929,8 +3960,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                id="_MSBC_rect_37-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -4374,7 +4406,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#e81123"
                 height={12}
-                width="62.22222222222222%"
+                id="_MSBC_rect_25-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -4403,8 +4436,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                id="_MSBC_rect_25-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
@@ -4574,7 +4608,8 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#0078d4"
                 height={12}
-                width="62.22222222222222%"
+                id="_MSBC_rect_25-0"
+                width="63.49206349206349%"
                 x="0%"
                 y={0}
               />
@@ -4603,8 +4638,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               <rect
                 fill="#107c10"
                 height={12}
-                width="35.77777777777778%"
-                x="64.22222222222223%"
+                id="_MSBC_rect_25-1"
+                width="36.507936507936506%"
+                x="63.49206349206349%"
                 y={0}
               />
             </g>
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap
index 41b63724ff8836..3dfe907adb9698 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap
@@ -127,7 +127,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#e81123"
                   height="12"
-                  width="6.5590928914086355%"
+                  id="_MSBC_rect_2-0"
+                  width="6.9522899104892675%"
                   x="0%"
                   y="0"
                 />
@@ -152,8 +153,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#107c10"
                   height="12"
-                  width="3.7714784125599654%"
-                  x="8.559092891408635%"
+                  id="_MSBC_rect_2-1"
+                  width="3.997566698531329%"
+                  x="6.9522899104892675%"
                   y="0"
                 />
               </g>
@@ -177,8 +179,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#ffb900"
                   height="12"
-                  width="0.9332751853467075%"
-                  x="14.3305713039686%"
+                  id="_MSBC_rect_2-2"
+                  width="0.9298687755279396%"
+                  x="10.949856609020596%"
                   y="0"
                 />
               </g>
@@ -202,8 +205,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  width="14.266027038813782%"
-                  x="17.263846489315306%"
+                  id="_MSBC_rect_2-3"
+                  width="15.12123055531416%"
+                  x="11.879725384548536%"
                   y="0"
                 />
               </g>
@@ -227,8 +231,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#000000"
                   height="12"
-                  width="68.87047535979067%"
-                  x="33.52987352812909%"
+                  id="_MSBC_rect_2-4"
+                  width="72.99904406013731%"
+                  x="27.000955939862695%"
                   y="0"
                 />
               </g>
@@ -348,7 +353,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#e81123"
                   height="12"
-                  width="31.414634146341463%"
+                  id="_MSBC_rect_2-0"
+                  width="34.14634146341463%"
                   x="0%"
                   y="0"
                 />
@@ -373,8 +379,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#107c10"
                   height="12"
-                  width="12.565853658536586%"
-                  x="33.41463414634146%"
+                  id="_MSBC_rect_2-1"
+                  width="13.658536585365852%"
+                  x="34.14634146341463%"
                   y="0"
                 />
               </g>
@@ -398,8 +405,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#ffb900"
                   height="12"
-                  width="7.853658536585366%"
-                  x="47.98048780487805%"
+                  id="_MSBC_rect_2-2"
+                  width="8.536585365853657%"
+                  x="47.80487804878048%"
                   y="0"
                 />
               </g>
@@ -423,8 +431,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  width="20.64390243902439%"
-                  x="57.834146341463416%"
+                  id="_MSBC_rect_2-3"
+                  width="22.4390243902439%"
+                  x="56.341463414634134%"
                   y="0"
                 />
               </g>
@@ -448,8 +457,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#000000"
                   height="12"
-                  width="19.521951219512193%"
-                  x="80.47804878048781%"
+                  id="_MSBC_rect_2-4"
+                  width="21.219512195121947%"
+                  x="78.78048780487804%"
                   y="0"
                 />
               </g>
@@ -596,7 +606,8 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#0078d4"
                   height="12"
-                  width="62.22222222222222%"
+                  id="_MSBC_rect_2-0"
+                  width="63.49206349206349%"
                   x="0%"
                   y="0"
                 />
@@ -621,8 +632,9 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                 <rect
                   fill="#107c10"
                   height="12"
-                  width="35.77777777777778%"
-                  x="64.22222222222223%"
+                  id="_MSBC_rect_2-1"
+                  width="36.507936507936506%"
+                  x="63.49206349206349%"
                   y="0"
                 />
               </g>
@@ -1255,7 +1267,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#e81123"
                   height="12"
-                  width="6.5590928914086355%"
+                  id="_MSBC_rect_176-0"
+                  width="6.9522899104892675%"
                   x="0%"
                   y="0"
                 />
@@ -1280,8 +1293,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  width="3.7714784125599654%"
-                  x="8.559092891408635%"
+                  id="_MSBC_rect_176-1"
+                  width="3.997566698531329%"
+                  x="6.9522899104892675%"
                   y="0"
                 />
               </g>
@@ -1305,8 +1319,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#ffb900"
                   height="12"
-                  width="0.9332751853467075%"
-                  x="14.3305713039686%"
+                  id="_MSBC_rect_176-2"
+                  width="0.9298687755279396%"
+                  x="10.949856609020596%"
                   y="0"
                 />
               </g>
@@ -1330,8 +1345,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  width="14.266027038813782%"
-                  x="17.263846489315306%"
+                  id="_MSBC_rect_176-3"
+                  width="15.12123055531416%"
+                  x="11.879725384548536%"
                   y="0"
                 />
               </g>
@@ -1355,8 +1371,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#000000"
                   height="12"
-                  width="68.87047535979067%"
-                  x="33.52987352812909%"
+                  id="_MSBC_rect_176-4"
+                  width="72.99904406013731%"
+                  x="27.000955939862695%"
                   y="0"
                 />
               </g>
@@ -1476,7 +1493,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#e81123"
                   height="12"
-                  width="31.414634146341463%"
+                  id="_MSBC_rect_176-0"
+                  width="34.14634146341463%"
                   x="0%"
                   y="0"
                 />
@@ -1501,8 +1519,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  width="12.565853658536586%"
-                  x="33.41463414634146%"
+                  id="_MSBC_rect_176-1"
+                  width="13.658536585365852%"
+                  x="34.14634146341463%"
                   y="0"
                 />
               </g>
@@ -1526,8 +1545,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#ffb900"
                   height="12"
-                  width="7.853658536585366%"
-                  x="47.98048780487805%"
+                  id="_MSBC_rect_176-2"
+                  width="8.536585365853657%"
+                  x="47.80487804878048%"
                   y="0"
                 />
               </g>
@@ -1551,8 +1571,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  width="20.64390243902439%"
-                  x="57.834146341463416%"
+                  id="_MSBC_rect_176-3"
+                  width="22.4390243902439%"
+                  x="56.341463414634134%"
                   y="0"
                 />
               </g>
@@ -1576,8 +1597,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#000000"
                   height="12"
-                  width="19.521951219512193%"
-                  x="80.47804878048781%"
+                  id="_MSBC_rect_176-4"
+                  width="21.219512195121947%"
+                  x="78.78048780487804%"
                   y="0"
                 />
               </g>
@@ -1724,7 +1746,8 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#0078d4"
                   height="12"
-                  width="62.22222222222222%"
+                  id="_MSBC_rect_176-0"
+                  width="63.49206349206349%"
                   x="0%"
                   y="0"
                 />
@@ -1749,8 +1772,9 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  width="35.77777777777778%"
-                  x="64.22222222222223%"
+                  id="_MSBC_rect_176-1"
+                  width="36.507936507936506%"
+                  x="63.49206349206349%"
                   y="0"
                 />
               </g>
@@ -2383,7 +2407,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#e81123"
                   height="12"
-                  width="6.5590928914086355%"
+                  id="_MSBC_rect_191-0"
+                  width="6.9522899104892675%"
                   x="0%"
                   y="0"
                 />
@@ -2408,8 +2433,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  width="3.7714784125599654%"
-                  x="8.559092891408635%"
+                  id="_MSBC_rect_191-1"
+                  width="3.997566698531329%"
+                  x="6.9522899104892675%"
                   y="0"
                 />
               </g>
@@ -2433,8 +2459,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#ffb900"
                   height="12"
-                  width="0.9332751853467075%"
-                  x="14.3305713039686%"
+                  id="_MSBC_rect_191-2"
+                  width="0.9298687755279396%"
+                  x="10.949856609020596%"
                   y="0"
                 />
               </g>
@@ -2458,8 +2485,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  width="14.266027038813782%"
-                  x="17.263846489315306%"
+                  id="_MSBC_rect_191-3"
+                  width="15.12123055531416%"
+                  x="11.879725384548536%"
                   y="0"
                 />
               </g>
@@ -2483,8 +2511,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#000000"
                   height="12"
-                  width="68.87047535979067%"
-                  x="33.52987352812909%"
+                  id="_MSBC_rect_191-4"
+                  width="72.99904406013731%"
+                  x="27.000955939862695%"
                   y="0"
                 />
               </g>
@@ -2604,7 +2633,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#e81123"
                   height="12"
-                  width="31.414634146341463%"
+                  id="_MSBC_rect_191-0"
+                  width="34.14634146341463%"
                   x="0%"
                   y="0"
                 />
@@ -2629,8 +2659,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  width="12.565853658536586%"
-                  x="33.41463414634146%"
+                  id="_MSBC_rect_191-1"
+                  width="13.658536585365852%"
+                  x="34.14634146341463%"
                   y="0"
                 />
               </g>
@@ -2654,8 +2685,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#ffb900"
                   height="12"
-                  width="7.853658536585366%"
-                  x="47.98048780487805%"
+                  id="_MSBC_rect_191-2"
+                  width="8.536585365853657%"
+                  x="47.80487804878048%"
                   y="0"
                 />
               </g>
@@ -2679,8 +2711,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#00bcf2"
                   height="12"
-                  width="20.64390243902439%"
-                  x="57.834146341463416%"
+                  id="_MSBC_rect_191-3"
+                  width="22.4390243902439%"
+                  x="56.341463414634134%"
                   y="0"
                 />
               </g>
@@ -2704,8 +2737,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#000000"
                   height="12"
-                  width="19.521951219512193%"
-                  x="80.47804878048781%"
+                  id="_MSBC_rect_191-4"
+                  width="21.219512195121947%"
+                  x="78.78048780487804%"
                   y="0"
                 />
               </g>
@@ -2852,7 +2886,8 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#0078d4"
                   height="12"
-                  width="62.22222222222222%"
+                  id="_MSBC_rect_191-0"
+                  width="63.49206349206349%"
                   x="0%"
                   y="0"
                 />
@@ -2877,8 +2912,9 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 <rect
                   fill="#107c10"
                   height="12"
-                  width="35.77777777777778%"
-                  x="64.22222222222223%"
+                  id="_MSBC_rect_191-1"
+                  width="36.507936507936506%"
+                  x="63.49206349206349%"
                   y="0"
                 />
               </g>
@@ -3524,7 +3560,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#e81123"
                     height="12"
-                    width="6.5590928914086355%"
+                    id="_MSBC_rect_209-0"
+                    width="6.9522899104892675%"
                     x="0%"
                     y="0"
                   />
@@ -3549,8 +3586,9 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#107c10"
                     height="12"
-                    width="3.7714784125599654%"
-                    x="8.559092891408635%"
+                    id="_MSBC_rect_209-1"
+                    width="3.997566698531329%"
+                    x="6.9522899104892675%"
                     y="0"
                   />
                 </g>
@@ -3574,8 +3612,9 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#ffb900"
                     height="12"
-                    width="0.9332751853467075%"
-                    x="14.3305713039686%"
+                    id="_MSBC_rect_209-2"
+                    width="0.9298687755279396%"
+                    x="10.949856609020596%"
                     y="0"
                   />
                 </g>
@@ -3599,8 +3638,9 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#00bcf2"
                     height="12"
-                    width="14.266027038813782%"
-                    x="17.263846489315306%"
+                    id="_MSBC_rect_209-3"
+                    width="15.12123055531416%"
+                    x="11.879725384548536%"
                     y="0"
                   />
                 </g>
@@ -3624,8 +3664,9 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#000000"
                     height="12"
-                    width="68.87047535979067%"
-                    x="33.52987352812909%"
+                    id="_MSBC_rect_209-4"
+                    width="72.99904406013731%"
+                    x="27.000955939862695%"
                     y="0"
                   />
                 </g>
@@ -3745,7 +3786,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#e81123"
                     height="12"
-                    width="31.414634146341463%"
+                    id="_MSBC_rect_209-0"
+                    width="34.14634146341463%"
                     x="0%"
                     y="0"
                   />
@@ -3770,8 +3812,9 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#107c10"
                     height="12"
-                    width="12.565853658536586%"
-                    x="33.41463414634146%"
+                    id="_MSBC_rect_209-1"
+                    width="13.658536585365852%"
+                    x="34.14634146341463%"
                     y="0"
                   />
                 </g>
@@ -3795,8 +3838,9 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#ffb900"
                     height="12"
-                    width="7.853658536585366%"
-                    x="47.98048780487805%"
+                    id="_MSBC_rect_209-2"
+                    width="8.536585365853657%"
+                    x="47.80487804878048%"
                     y="0"
                   />
                 </g>
@@ -3820,8 +3864,9 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#00bcf2"
                     height="12"
-                    width="20.64390243902439%"
-                    x="57.834146341463416%"
+                    id="_MSBC_rect_209-3"
+                    width="22.4390243902439%"
+                    x="56.341463414634134%"
                     y="0"
                   />
                 </g>
@@ -3845,8 +3890,9 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#000000"
                     height="12"
-                    width="19.521951219512193%"
-                    x="80.47804878048781%"
+                    id="_MSBC_rect_209-4"
+                    width="21.219512195121947%"
+                    x="78.78048780487804%"
                     y="0"
                   />
                 </g>
@@ -3993,7 +4039,8 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#0078d4"
                     height="12"
-                    width="62.22222222222222%"
+                    id="_MSBC_rect_209-0"
+                    width="63.49206349206349%"
                     x="0%"
                     y="0"
                   />
@@ -4018,8 +4065,9 @@ exports[`Should reflect theme change 1`] = `
                   <rect
                     fill="#107c10"
                     height="12"
-                    width="35.77777777777778%"
-                    x="64.22222222222223%"
+                    id="_MSBC_rect_209-1"
+                    width="36.507936507936506%"
+                    x="63.49206349206349%"
                     y="0"
                   />
                 </g>
diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx
index e9c9973474660a..d168bde86803db 100644
--- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx
+++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx
@@ -1,37 +1,85 @@
 import * as React from 'react';
 import { IChartDataPoint, MultiStackedBarChart, IChartProps } from '@fluentui/react-charting';
 
-export const MultiStackedBarChartExample: React.FunctionComponent = () => {
+export const MultiStackedBarChartBasicExample: React.FunctionComponent = () => {
   const firstChartPoints: IChartDataPoint[] = [
     {
       legend: 'Debit card numbers (EU and USA)',
       data: 40,
       color: '#0099BC',
-      callOutAccessibilityData: { ariaLabel: 'Bar series 1 of 5 Debit card numbers (EU and USA) 40' },
+      callOutAccessibilityData: { ariaLabel: 'Bar series 1 of 13 Debit card numbers (EU and USA) 40' },
     },
     {
       legend: 'Passport numbers (USA)',
       data: 23,
       color: '#77004D',
-      callOutAccessibilityData: { ariaLabel: 'Bar series 2 of 5 Passport numbers (USA) 23' },
+      callOutAccessibilityData: { ariaLabel: 'Bar series 2 of 13 Passport numbers (USA) 23' },
     },
     {
       legend: 'Social security numbers',
       data: 35,
       color: '#4F68ED',
-      callOutAccessibilityData: { ariaLabel: 'Bar series 3 of 5 Social security numbers 35' },
+      callOutAccessibilityData: { ariaLabel: 'Bar series 3 of 13 Social security numbers 35' },
     },
     {
       legend: 'Credit card numbers',
       data: 87,
       color: '#AE8C00',
-      callOutAccessibilityData: { ariaLabel: 'Bar series 4 of 5 Credit card numbers 87' },
+      callOutAccessibilityData: { ariaLabel: 'Bar series 4 of 13 Credit card numbers 87' },
     },
     {
       legend: 'Tax identification numbers (USA)',
       data: 87,
       color: '#004E8C',
-      callOutAccessibilityData: { ariaLabel: 'Bar series 5 of 5 Tax identification numbers (USA) 87' },
+      callOutAccessibilityData: { ariaLabel: 'Bar series 5 of 13 Tax identification numbers (USA) 87' },
+    },
+    {
+      legend: "Driver's license numbers (USA)",
+      data: 0.5,
+      color: '#00A6A6',
+      callOutAccessibilityData: { ariaLabel: "Bar series 6 of 13 Driver's license numbers (USA) 0.5" },
+    },
+    {
+      legend: 'Email addresses',
+      data: 0.5,
+      color: '#FF5733',
+      callOutAccessibilityData: { ariaLabel: 'Bar series 7 of 13 Email addresses 0.5' },
+    },
+    {
+      legend: 'Phone numbers',
+      data: 0.5,
+      color: '#7E2F8E',
+      callOutAccessibilityData: { ariaLabel: 'Bar series 8 of 13 Phone numbers 0.5' },
+    },
+    {
+      legend: 'Health insurance numbers',
+      data: 0.5,
+      color: '#00B300',
+      callOutAccessibilityData: { ariaLabel: 'Bar series 9 of 13 Health insurance numbers 0.5' },
+    },
+    {
+      legend: 'Bank account numbers',
+      data: 0.5,
+      color: '#8C4D00',
+      callOutAccessibilityData: { ariaLabel: 'Bar series 10 of 13 Bank account numbers 0.5' },
+    },
+    {
+      legend: 'Employee identification numbers',
+      data: 0.5,
+      color: '#B34D9A',
+      callOutAccessibilityData: { ariaLabel: 'Bar series 11 of 13 Employee identification numbers 0.5' },
+    },
+    {
+      legend: 'Vehicle registration numbers',
+      data: 0.5,
+      color: '#FF9A00',
+      callOutAccessibilityData: { ariaLabel: 'Bar series 12 of 13 Vehicle registration numbers 0.5' },
+    },
+    {
+      legend: 'Student identification numbers',
+      data: 0.5,
+      color: '#007E00',
+      callOutAccessibilityData: { ariaLabel: 'Bar series 13 of 13 Student identification numbers 0.5' },
     },
   ];
   const firstChartPoints1: IChartDataPoint[] = [
diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
index 47478b21ad050c..d5a1a45e7a4641 100644
--- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
+++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx
@@ -6,6 +6,7 @@ import {
   MultiStackedBarChartVariant,
 } from '@fluentui/react-charting';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
+
 interface IMSBCVariantExampleState {
   hideLabels: boolean;
 }
diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartPage.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartPage.tsx
index 91bb42c6b7b5bd..c83c24cad82e0d 100644
--- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartPage.tsx
+++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartPage.tsx
@@ -6,7 +6,7 @@ import {
   PropertiesTableSet,
 } from '@fluentui/react-docsite-components';
 
-import { MultiStackedBarChartExample } from './MultiStackedBarChart.Example';
+import { MultiStackedBarChartBasicExample } from './MultiStackedBarChart.Example';
 import { MultiStackedBarChartWithPlaceholderExample } from './MultiStackedBarChartWithPlaceHolder.Example';
 import { MultiStackedBarChartVariantExample } from './MultiStackedBarChart.Variant.Example';
 
@@ -26,7 +26,7 @@ export class MultiStackedBarChartPage extends React.Component<IComponentDemoPage
         exampleCards={
           <>
             <ExampleCard title="Multi Stacked Bar Chart" code={MultiStackedBarChartExampleCode}>
-              <MultiStackedBarChartExample />
+              <MultiStackedBarChartBasicExample />
             </ExampleCard>
             <ExampleCard
               title="Multi Stacked Bar Chart With Placeholder"

From c6f175002683257be5ed47d96ad00346543d9e5e Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Thu, 17 Aug 2023 23:22:58 +0530
Subject: [PATCH 18/22] removed emptychart flag

---
 .../components/StackedBarChart/MultiStackedBarChart.base.tsx    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index b146329ae073dc..94e6af5e465b27 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -38,7 +38,6 @@ export interface IMultiStackedBarChartState {
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
-  emptyChart?: boolean;
   barSpacingInPercent: number;
 }
 
@@ -73,7 +72,6 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       xCalloutValue: '',
       yCalloutValue: '',
       calloutLegend: '',
-      emptyChart: false,
       barSpacingInPercent: 0,
     };
     this._onLeave = this._onLeave.bind(this);

From 747730efb1f5bfda37f9b6f27ab0df898bd73142 Mon Sep 17 00:00:00 2001
From: Yush Singla <yushsingla@microsoft.com>
Date: Fri, 18 Aug 2023 20:31:12 +0530
Subject: [PATCH 19/22] stacked bar chart focus indicator bug resolved

---
 .../StackedBarChart/StackedBarChart.base.tsx  |   48 +-
 .../StackedBarChart/StackedBarChart.styles.ts |    4 +-
 .../StackedBarChart.test.tsx.snap             | 1115 ++++++++---------
 .../StackedBarChartRTL.test.tsx.snap          |  896 +++++++------
 4 files changed, 1026 insertions(+), 1037 deletions(-)

diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
index 7ddd4ccd358fe7..f7b4d3d5f88add 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';
-import { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';
+import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
 import { ILegend, Legends } from '../Legends/index';
 import { IAccessibilityProps, IChartDataPoint, IChartProps } from './index';
 import { IRefArrayData, IStackedBarChartProps, IStackedBarChartStyleProps, IStackedBarChartStyles } from '../../index';
@@ -23,6 +23,7 @@ export interface IStackedBarChartState {
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
+  barSpacingInPercent: number;
 }
 
 export class StackedBarChartBase extends React.Component<IStackedBarChartProps, IStackedBarChartState> {
@@ -37,6 +38,8 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
   private _refArray: IRefArrayData[];
   private _calloutAnchorPoint: IChartDataPoint | null;
   private _emptyChartId: string;
+  private barChartSvgRef: React.RefObject<SVGSVGElement>;
+  private _isRTL = getRTL();
 
   public constructor(props: IStackedBarChartProps) {
     super(props);
@@ -50,6 +53,7 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
       xCalloutValue: '',
       yCalloutValue: '',
       calloutLegend: '',
+      barSpacingInPercent: 0,
     };
     this._refArray = [];
     this._onLeave = this._onLeave.bind(this);
@@ -57,6 +61,16 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
     this._onBarLeave = this._onBarLeave.bind(this);
     this._calloutId = getId('callout');
     this._emptyChartId = getId('_SBC_empty');
+    this.barChartSvgRef = React.createRef<SVGSVGElement>();
+  }
+
+  public componentDidMount(): void {
+    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width || 0;
+    const MARGIN_WIDTH_IN_PX = 2;
+    if (svgWidth) {
+      const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
+      this.setState({ barSpacingInPercent: currentBarSpacing });
+    }
   }
 
   public render(): JSX.Element {
@@ -145,8 +159,8 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
           </FocusZone>
           <FocusZone direction={FocusZoneDirection.horizontal}>
             <div>
-              <svg className={this._classNames.chart} aria-label={data?.chartTitle}>
-                <g>{bars[0]}</g>
+              <svg ref={this.barChartSvgRef} className={this._classNames.chart} aria-label={data?.chartTitle}>
+                {bars[0]}
                 <Callout
                   gapSpace={15}
                   isBeakVisible={false}
@@ -202,6 +216,13 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
     });
   }
 
+  /**
+   * The Create bar functions returns an array of <rect> elements, which form the bars
+   * For each bar an x value, and a width needs to be specified
+   * The computations are done based on percentages
+   * Extra margin is also provided, in the x value to provide some spacing
+   */
+
   private _createBarsAndLegends(
     data: IChartProps,
     barHeight: number,
@@ -209,6 +230,11 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
     benchmarkData?: IChartDataPoint,
     targetData?: IChartDataPoint,
   ): [JSX.Element[], JSX.Element] {
+    const noOfBars =
+      data.chartData?.reduce((count: number, point: IChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||
+      1;
+    const totalMarginPercent = this.state.barSpacingInPercent * (noOfBars - 1);
+
     const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
     const legendDataItems: ILegend[] = [];
     // calculating starting point of each bar and it's range
@@ -234,7 +260,15 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
       return sumOfPercent;
     });
 
-    const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
+    /**
+     * The %age of the space occupied by the margin needs to subtracted
+     * while computing the scaling ratio, since the margins are not being
+     * scaled down, only the data is being scaled down from a higher percentage to lower percentage
+     * Eg: 95% of the space is taken by the bars, 5% by the margins
+     * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%
+     * since that's only space available to the bars
+     */
+    const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;
 
     const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {
       const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
@@ -307,7 +341,11 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
           <rect
             key={index}
             id={getId('_SBC_bar')}
-            x={startingPoint[index] + '%'}
+            x={`${
+              this._isRTL
+                ? 100 - startingPoint[index] - value - this.state.barSpacingInPercent * index
+                : startingPoint[index] + this.state.barSpacingInPercent * index
+            }%`}
             y={0}
             width={value + '%'}
             height={barHeight}
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts
index 595d591d6f0119..0f18c36f1b2dac 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts
@@ -31,6 +31,7 @@ export const getStyles = (props: IStackedBarChartStyleProps): IStackedBarChartSt
       height: barHeight ? barHeight : 12,
       display: 'block',
       marginBottom: showTriangle ? '16px' : '10px',
+      overflow: 'visible',
     },
     chartTitle: {
       ...theme.fonts.small,
@@ -51,10 +52,9 @@ export const getStyles = (props: IStackedBarChartStyleProps): IStackedBarChartSt
     opacityChangeOnHover: {
       opacity: shouldHighlight ? '' : '0.1',
       cursor: href ? 'pointer' : 'default',
-      stroke: theme.palette.white,
-      strokeWidth: 2,
       selectors: {
         '&:focus': {
+          outlineColor: theme.palette.black,
           stroke: theme.palette.black,
           strokeWidth: '2px',
         },
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
index 2b3a46ccbecef1..b5914c17979880 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
@@ -131,78 +131,75 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
-        <g>
-          <g
-            aria-label="first Lorem ipsum dolor sit amet, 40."
-            className=
+        <g
+          aria-label="first Lorem ipsum dolor sit amet, 40."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          key="0"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#5c005c"
+            height={12}
+            id="_SBC_bar7"
             key="0"
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#5c005c"
-              height={12}
-              id="_SBC_bar7"
-              key="0"
-              width="63.49206349206349%"
-              x="0%"
-              y={0}
-            />
-          </g>
-          <g
-            aria-label="Winter is coming, 23."
-            className=
+            width="63.49206349206349%"
+            x="0%"
+            y={0}
+          />
+        </g>
+        <g
+          aria-label="Winter is coming, 23."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          key="1"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#e81123"
+            height={12}
+            id="_SBC_bar8"
             key="1"
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#e81123"
-              height={12}
-              id="_SBC_bar8"
-              key="1"
-              width="36.507936507936506%"
-              x="63.49206349206349%"
-              y={0}
-            />
-          </g>
+            width="36.507936507936506%"
+            x="63.49206349206349%"
+            y={0}
+          />
         </g>
         <div
           className=
@@ -503,78 +500,75 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
-        <g>
-          <g
-            aria-label="first Lorem ipsum dolor sit amet, 40."
-            className=
+        <g
+          aria-label="first Lorem ipsum dolor sit amet, 40."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          key="0"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#5c005c"
+            height={12}
+            id="_SBC_bar7"
             key="0"
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#5c005c"
-              height={12}
-              id="_SBC_bar7"
-              key="0"
-              width="63.49206349206349%"
-              x="0%"
-              y={0}
-            />
-          </g>
-          <g
-            aria-label="Winter is coming, 23."
-            className=
+            width="63.49206349206349%"
+            x="0%"
+            y={0}
+          />
+        </g>
+        <g
+          aria-label="Winter is coming, 23."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          key="1"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#e81123"
+            height={12}
+            id="_SBC_bar8"
             key="1"
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#e81123"
-              height={12}
-              id="_SBC_bar8"
-              key="1"
-              width="36.507936507936506%"
-              x="63.49206349206349%"
-              y={0}
-            />
-          </g>
+            width="36.507936507936506%"
+            x="63.49206349206349%"
+            y={0}
+          />
         </g>
         <div
           className=
@@ -792,74 +786,71 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
-        <g>
-          <g
-            aria-label="first Lorem ipsum dolor sit amet, 40."
-            className=
+        <g
+          aria-label="first Lorem ipsum dolor sit amet, 40."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#5c005c"
-              height={12}
-              id="_SBC_bar2"
-              width="63.49206349206349%"
-              x="0%"
-              y={0}
-            />
-          </g>
-          <g
-            aria-label="Winter is coming, 23."
-            className=
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#5c005c"
+            height={12}
+            id="_SBC_bar2"
+            width="63.49206349206349%"
+            x="0%"
+            y={0}
+          />
+        </g>
+        <g
+          aria-label="Winter is coming, 23."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#e81123"
-              height={12}
-              id="_SBC_bar3"
-              width="36.507936507936506%"
-              x="63.49206349206349%"
-              y={0}
-            />
-          </g>
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#e81123"
+            height={12}
+            id="_SBC_bar3"
+            width="36.507936507936506%"
+            x="63.49206349206349%"
+            y={0}
+          />
         </g>
         <span
           className="ms-layer"
@@ -1001,74 +992,71 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
-        <g>
-          <g
-            aria-label="first Lorem ipsum dolor sit amet, 40."
-            className=
+        <g
+          aria-label="first Lorem ipsum dolor sit amet, 40."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#5c005c"
-              height={12}
-              id="_SBC_bar45"
-              width="63.49206349206349%"
-              x="0%"
-              y={0}
-            />
-          </g>
-          <g
-            aria-label="Winter is coming, 23."
-            className=
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#5c005c"
+            height={12}
+            id="_SBC_bar45"
+            width="63.49206349206349%"
+            x="0%"
+            y={0}
+          />
+        </g>
+        <g
+          aria-label="Winter is coming, 23."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#e81123"
-              height={12}
-              id="_SBC_bar46"
-              width="36.507936507936506%"
-              x="63.49206349206349%"
-              y={0}
-            />
-          </g>
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#e81123"
+            height={12}
+            id="_SBC_bar46"
+            width="36.507936507936506%"
+            x="63.49206349206349%"
+            y={0}
+          />
         </g>
         <span
           className="ms-layer"
@@ -1200,74 +1188,71 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
-        <g>
-          <g
-            aria-label="first Lorem ipsum dolor sit amet, 40."
-            className=
+        <g
+          aria-label="first Lorem ipsum dolor sit amet, 40."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#5c005c"
-              height={12}
-              id="_SBC_bar30"
-              width="63.49206349206349%"
-              x="0%"
-              y={0}
-            />
-          </g>
-          <g
-            aria-label="Winter is coming, 23."
-            className=
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#5c005c"
+            height={12}
+            id="_SBC_bar30"
+            width="63.49206349206349%"
+            x="0%"
+            y={0}
+          />
+        </g>
+        <g
+          aria-label="Winter is coming, 23."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#e81123"
-              height={12}
-              id="_SBC_bar31"
-              width="36.507936507936506%"
-              x="63.49206349206349%"
-              y={0}
-            />
-          </g>
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#e81123"
+            height={12}
+            id="_SBC_bar31"
+            width="36.507936507936506%"
+            x="63.49206349206349%"
+            y={0}
+          />
         </g>
         <span
           className="ms-layer"
@@ -1409,74 +1394,71 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
-        <g>
-          <g
-            aria-label="first Lorem ipsum dolor sit amet, 40."
-            className=
+        <g
+          aria-label="first Lorem ipsum dolor sit amet, 40."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#5c005c"
-              height={12}
-              id="_SBC_bar9"
-              width="63.49206349206349%"
-              x="0%"
-              y={0}
-            />
-          </g>
-          <g
-            aria-label="Winter is coming, 23."
-            className=
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#5c005c"
+            height={12}
+            id="_SBC_bar9"
+            width="63.49206349206349%"
+            x="0%"
+            y={0}
+          />
+        </g>
+        <g
+          aria-label="Winter is coming, 23."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#e81123"
-              height={12}
-              id="_SBC_bar10"
-              width="36.507936507936506%"
-              x="63.49206349206349%"
-              y={0}
-            />
-          </g>
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#e81123"
+            height={12}
+            id="_SBC_bar10"
+            width="36.507936507936506%"
+            x="63.49206349206349%"
+            y={0}
+          />
         </g>
         <span
           className="ms-layer"
@@ -1592,74 +1574,71 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
-        <g>
-          <g
-            aria-label="first Lorem ipsum dolor sit amet, 40."
-            className=
+        <g
+          aria-label="first Lorem ipsum dolor sit amet, 40."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#5c005c"
-              height={12}
-              id="_SBC_bar23"
-              width="63.49206349206349%"
-              x="0%"
-              y={0}
-            />
-          </g>
-          <g
-            aria-label="Winter is coming, 23."
-            className=
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#5c005c"
+            height={12}
+            id="_SBC_bar23"
+            width="63.49206349206349%"
+            x="0%"
+            y={0}
+          />
+        </g>
+        <g
+          aria-label="Winter is coming, 23."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#e81123"
-              height={12}
-              id="_SBC_bar24"
-              width="36.507936507936506%"
-              x="63.49206349206349%"
-              y={0}
-            />
-          </g>
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#e81123"
+            height={12}
+            id="_SBC_bar24"
+            width="36.507936507936506%"
+            x="63.49206349206349%"
+            y={0}
+          />
         </g>
         <span
           className="ms-layer"
@@ -1801,74 +1780,71 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
-        <g>
-          <g
-            aria-label="first Lorem ipsum dolor sit amet, 40."
-            className=
+        <g
+          aria-label="first Lorem ipsum dolor sit amet, 40."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={false}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#5c005c"
-              height={12}
-              id="_SBC_bar16"
-              width="63.49206349206349%"
-              x="0%"
-              y={0}
-            />
-          </g>
-          <g
-            aria-label="Winter is coming, 23."
-            className=
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#5c005c"
+            height={12}
+            id="_SBC_bar16"
+            width="63.49206349206349%"
+            x="0%"
+            y={0}
+          />
+        </g>
+        <g
+          aria-label="Winter is coming, 23."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={false}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#e81123"
-              height={12}
-              id="_SBC_bar17"
-              width="36.507936507936506%"
-              x="63.49206349206349%"
-              y={0}
-            />
-          </g>
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#e81123"
+            height={12}
+            id="_SBC_bar17"
+            width="36.507936507936506%"
+            x="63.49206349206349%"
+            y={0}
+          />
         </g>
         <span
           className="ms-layer"
@@ -1984,74 +1960,71 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
-        <g>
-          <g
-            aria-label="first Lorem ipsum dolor sit amet, 40."
-            className=
+        <g
+          aria-label="first Lorem ipsum dolor sit amet, 40."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#5c005c"
-              height={12}
-              id="_SBC_bar37"
-              width="63.49206349206349%"
-              x="0%"
-              y={0}
-            />
-          </g>
-          <g
-            aria-label="Winter is coming, 23."
-            className=
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#5c005c"
+            height={12}
+            id="_SBC_bar37"
+            width="63.49206349206349%"
+            x="0%"
+            y={0}
+          />
+        </g>
+        <g
+          aria-label="Winter is coming, 23."
+          className=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
-                }
-                &:focus {
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseMove={[Function]}
-            onMouseOver={[Function]}
-            pointerEvents="all"
-            role="img"
-          >
-            <rect
-              fill="#e81123"
-              height={12}
-              id="_SBC_bar38"
-              width="36.507936507936506%"
-              x="63.49206349206349%"
-              y={0}
-            />
-          </g>
+              {
+                cursor: default;
+                opacity: ;
+              }
+              &:focus {
+                outline-color: #000000;
+                stroke-width: 2px;
+                stroke: #000000;
+              }
+          data-is-focusable={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          pointerEvents="all"
+          role="img"
+        >
+          <rect
+            fill="#e81123"
+            height={12}
+            id="_SBC_bar38"
+            width="36.507936507936506%"
+            x="63.49206349206349%"
+            y={0}
+          />
         </g>
         <span
           className="ms-layer"
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap
index 9c19f42a1b8718..2ffac700f0626f 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap
@@ -84,123 +84,118 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 display: block;
                 height: 12px;
                 margin-bottom: 10px;
+                overflow: visible;
                 width: 100%;
               }
           focusable="false"
         >
-          <g>
-            <g
-              aria-label="2020/04/30, 40%."
-              class=
+          <g
+            aria-label="2020/04/30, 40%."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="0"
-            >
-              <rect
-                fill="#0078d4"
-                height="12"
-                id="_SBC_bar213"
-                width="37.22084367245658%"
-                x="0%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="second, 100."
-              class=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="0"
+          >
+            <rect
+              fill="#0078d4"
+              height="12"
+              id="_SBC_bar213"
+              width="37.22084367245658%"
+              x="0%"
+              y="0"
+            />
+          </g>
+          <g
+            aria-label="second, 100."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#107c10"
-                height="12"
-                id="_SBC_bar214"
-                width="12.40694789081886%"
-                x="37.22084367245658%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="third, -200."
-              class=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="-1"
+          >
+            <rect
+              fill="#107c10"
+              height="12"
+              id="_SBC_bar214"
+              width="12.40694789081886%"
+              x="37.22084367245658%"
+              y="0"
+            />
+          </g>
+          <g
+            aria-label="third, -200."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#e81123"
-                height="12"
-                id="_SBC_bar215"
-                width="0.7444168734491317%"
-                x="49.62779156327544%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="fourth, 400."
-              class=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="-1"
+          >
+            <rect
+              fill="#e81123"
+              height="12"
+              id="_SBC_bar215"
+              width="0.7444168734491317%"
+              x="49.62779156327544%"
+              y="0"
+            />
+          </g>
+          <g
+            aria-label="fourth, 400."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#d83b01"
-                height="12"
-                id="_SBC_bar216"
-                width="49.62779156327544%"
-                x="50.37220843672457%"
-                y="0"
-              />
-            </g>
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="-1"
+          >
+            <rect
+              fill="#d83b01"
+              height="12"
+              id="_SBC_bar216"
+              width="49.62779156327544%"
+              x="50.37220843672457%"
+              y="0"
+            />
           </g>
           <span
             class="ms-layer"
@@ -700,123 +695,118 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 display: block;
                 height: 12px;
                 margin-bottom: 10px;
+                overflow: visible;
                 width: 100%;
               }
           focusable="false"
         >
-          <g>
-            <g
-              aria-label="2020/04/30, 40%."
-              class=
+          <g
+            aria-label="2020/04/30, 40%."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="0"
-            >
-              <rect
-                fill="#0078d4"
-                height="12"
-                id="_SBC_bar223"
-                width="37.22084367245658%"
-                x="0%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="second, 100."
-              class=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="0"
+          >
+            <rect
+              fill="#0078d4"
+              height="12"
+              id="_SBC_bar223"
+              width="37.22084367245658%"
+              x="0%"
+              y="0"
+            />
+          </g>
+          <g
+            aria-label="second, 100."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#107c10"
-                height="12"
-                id="_SBC_bar224"
-                width="12.40694789081886%"
-                x="37.22084367245658%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="third, -200."
-              class=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="-1"
+          >
+            <rect
+              fill="#107c10"
+              height="12"
+              id="_SBC_bar224"
+              width="12.40694789081886%"
+              x="37.22084367245658%"
+              y="0"
+            />
+          </g>
+          <g
+            aria-label="third, -200."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#e81123"
-                height="12"
-                id="_SBC_bar225"
-                width="0.7444168734491317%"
-                x="49.62779156327544%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="fourth, 400."
-              class=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="-1"
+          >
+            <rect
+              fill="#e81123"
+              height="12"
+              id="_SBC_bar225"
+              width="0.7444168734491317%"
+              x="49.62779156327544%"
+              y="0"
+            />
+          </g>
+          <g
+            aria-label="fourth, 400."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#d83b01"
-                height="12"
-                id="_SBC_bar226"
-                width="49.62779156327544%"
-                x="50.37220843672457%"
-                y="0"
-              />
-            </g>
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="-1"
+          >
+            <rect
+              fill="#d83b01"
+              height="12"
+              id="_SBC_bar226"
+              width="49.62779156327544%"
+              x="50.37220843672457%"
+              y="0"
+            />
           </g>
           <span
             class="ms-layer"
@@ -1329,123 +1319,118 @@ exports[`Should reflect theme change 1`] = `
                   display: block;
                   height: 12px;
                   margin-bottom: 10px;
+                  overflow: visible;
                   width: 100%;
                 }
             focusable="false"
           >
-            <g>
-              <g
-                aria-label="2020/04/30, 40%."
-                class=
+            <g
+              aria-label="2020/04/30, 40%."
+              class=
 
-                    {
-                      cursor: default;
-                      opacity: ;
-                      stroke-width: 2px;
-                      stroke: #1b1a19;
-                    }
-                    &:focus {
-                      stroke-width: 2px;
-                      stroke: #ffffff;
-                    }
-                data-is-focusable="true"
-                pointer-events="all"
-                role="img"
-                tabindex="0"
-              >
-                <rect
-                  fill="#0078d4"
-                  height="12"
-                  id="_SBC_bar236"
-                  width="37.22084367245658%"
-                  x="0%"
-                  y="0"
-                />
-              </g>
-              <g
-                aria-label="second, 100."
-                class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    outline-color: #ffffff;
+                    stroke-width: 2px;
+                    stroke: #ffffff;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="0"
+            >
+              <rect
+                fill="#0078d4"
+                height="12"
+                id="_SBC_bar236"
+                width="37.22084367245658%"
+                x="0%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="second, 100."
+              class=
 
-                    {
-                      cursor: default;
-                      opacity: ;
-                      stroke-width: 2px;
-                      stroke: #1b1a19;
-                    }
-                    &:focus {
-                      stroke-width: 2px;
-                      stroke: #ffffff;
-                    }
-                data-is-focusable="true"
-                pointer-events="all"
-                role="img"
-                tabindex="-1"
-              >
-                <rect
-                  fill="#107c10"
-                  height="12"
-                  id="_SBC_bar237"
-                  width="12.40694789081886%"
-                  x="37.22084367245658%"
-                  y="0"
-                />
-              </g>
-              <g
-                aria-label="third, -200."
-                class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    outline-color: #ffffff;
+                    stroke-width: 2px;
+                    stroke: #ffffff;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#107c10"
+                height="12"
+                id="_SBC_bar237"
+                width="12.40694789081886%"
+                x="37.22084367245658%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="third, -200."
+              class=
 
-                    {
-                      cursor: default;
-                      opacity: ;
-                      stroke-width: 2px;
-                      stroke: #1b1a19;
-                    }
-                    &:focus {
-                      stroke-width: 2px;
-                      stroke: #ffffff;
-                    }
-                data-is-focusable="true"
-                pointer-events="all"
-                role="img"
-                tabindex="-1"
-              >
-                <rect
-                  fill="#e81123"
-                  height="12"
-                  id="_SBC_bar238"
-                  width="0.7444168734491317%"
-                  x="49.62779156327544%"
-                  y="0"
-                />
-              </g>
-              <g
-                aria-label="fourth, 400."
-                class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    outline-color: #ffffff;
+                    stroke-width: 2px;
+                    stroke: #ffffff;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#e81123"
+                height="12"
+                id="_SBC_bar238"
+                width="0.7444168734491317%"
+                x="49.62779156327544%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="fourth, 400."
+              class=
 
-                    {
-                      cursor: default;
-                      opacity: ;
-                      stroke-width: 2px;
-                      stroke: #1b1a19;
-                    }
-                    &:focus {
-                      stroke-width: 2px;
-                      stroke: #ffffff;
-                    }
-                data-is-focusable="true"
-                pointer-events="all"
-                role="img"
-                tabindex="-1"
-              >
-                <rect
-                  fill="#d83b01"
-                  height="12"
-                  id="_SBC_bar239"
-                  width="49.62779156327544%"
-                  x="50.37220843672457%"
-                  y="0"
-                />
-              </g>
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    outline-color: #ffffff;
+                    stroke-width: 2px;
+                    stroke: #ffffff;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#d83b01"
+                height="12"
+                id="_SBC_bar239"
+                width="49.62779156327544%"
+                x="50.37220843672457%"
+                y="0"
+              />
             </g>
             <span
               class="ms-layer"
@@ -1946,34 +1931,32 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with em
                 display: block;
                 height: 12px;
                 margin-bottom: 10px;
+                overflow: visible;
                 width: 100%;
               }
           focusable="false"
         >
-          <g>
-            <g
-              class=
+          <g
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-            >
-              <rect
-                fill="#edebe9"
-                height="12"
-                id="_SBC_empty_bar_16"
-                width="100%"
-                x="0%"
-                y="0"
-              />
-            </g>
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+          >
+            <rect
+              fill="#edebe9"
+              height="12"
+              id="_SBC_empty_bar_16"
+              width="100%"
+              x="0%"
+              y="0"
+            />
           </g>
           <span
             class="ms-layer"
@@ -2473,123 +2456,118 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with no
                 display: block;
                 height: 12px;
                 margin-bottom: 10px;
+                overflow: visible;
                 width: 100%;
               }
           focusable="false"
         >
-          <g>
-            <g
-              aria-label="2020/04/30, 40%."
-              class=
+          <g
+            aria-label="2020/04/30, 40%."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="0"
-            >
-              <rect
-                fill="#0078d4"
-                height="12"
-                id="_SBC_bar2"
-                width="37.22084367245658%"
-                x="0%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="second, 100."
-              class=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="0"
+          >
+            <rect
+              fill="#0078d4"
+              height="12"
+              id="_SBC_bar2"
+              width="37.22084367245658%"
+              x="0%"
+              y="0"
+            />
+          </g>
+          <g
+            aria-label="second, 100."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#107c10"
-                height="12"
-                id="_SBC_bar3"
-                width="12.40694789081886%"
-                x="37.22084367245658%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="third, -200."
-              class=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="-1"
+          >
+            <rect
+              fill="#107c10"
+              height="12"
+              id="_SBC_bar3"
+              width="12.40694789081886%"
+              x="37.22084367245658%"
+              y="0"
+            />
+          </g>
+          <g
+            aria-label="third, -200."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#e81123"
-                height="12"
-                id="_SBC_bar4"
-                width="0.7444168734491317%"
-                x="49.62779156327544%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="fourth, 400."
-              class=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="-1"
+          >
+            <rect
+              fill="#e81123"
+              height="12"
+              id="_SBC_bar4"
+              width="0.7444168734491317%"
+              x="49.62779156327544%"
+              y="0"
+            />
+          </g>
+          <g
+            aria-label="fourth, 400."
+            class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-                  &:focus {
-                    stroke-width: 2px;
-                    stroke: #000000;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#d83b01"
-                height="12"
-                id="_SBC_bar5"
-                width="49.62779156327544%"
-                x="50.37220843672457%"
-                y="0"
-              />
-            </g>
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  outline-color: #000000;
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable="true"
+            pointer-events="all"
+            role="img"
+            tabindex="-1"
+          >
+            <rect
+              fill="#d83b01"
+              height="12"
+              id="_SBC_bar5"
+              width="49.62779156327544%"
+              x="50.37220843672457%"
+              y="0"
+            />
           </g>
           <span
             class="ms-layer"

From 87e1676ccd18901bc20cda75b3374503af411eda Mon Sep 17 00:00:00 2001
From: yush singla <yushsingla@microsoft.com>
Date: Sat, 19 Aug 2023 13:52:12 +0530
Subject: [PATCH 20/22] stacked bar chart bug fix

---
 .../src/components/StackedBarChart/StackedBarChart.base.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
index f7b4d3d5f88add..c32aa3284a1667 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
@@ -268,7 +268,7 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
      * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%
      * since that's only space available to the bars
      */
-    const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;
+    const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / (100 - totalMarginPercent) : 1;
 
     const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {
       const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];

From f6c95fcaed7088361d789ab74320ba87ddb8804f Mon Sep 17 00:00:00 2001
From: yush singla <yushsingla@microsoft.com>
Date: Thu, 24 Aug 2023 13:30:17 +0530
Subject: [PATCH 21/22] fixed the outline bug in dark mode

---
 .../HorizontalBarChart.base.tsx               |    2 +-
 .../MultiStackedBarChart.base.tsx             |    2 +-
 .../MultiStackedBarChart.styles.ts            |    2 -
 .../StackedBarChart/StackedBarChart.base.tsx  |    2 +-
 .../StackedBarChart/StackedBarChart.styles.ts |    1 -
 .../MultiStackedBarChart.test.tsx.snap        |   36 -
 .../MultiStackedBarChartRTL.test.tsx.snap     |   48 -
 .../StackedBarChart.test.tsx.snap             | 1070 ++++++++---------
 .../StackedBarChartRTL.test.tsx.snap          |  857 +++++++------
 9 files changed, 963 insertions(+), 1057 deletions(-)

diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index 865275caf4b759..72f3f627659feb 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -68,7 +68,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
 
   public componentDidMount(): void {
     const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width || 0;
-    const MARGIN_WIDTH_IN_PX = 2;
+    const MARGIN_WIDTH_IN_PX = 3;
     if (svgWidth) {
       const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
       this.setState({ barSpacingInPercent: currentBarSpacing });
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index 94e6af5e465b27..81df805217e69b 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -86,7 +86,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
 
   public componentDidMount(): void {
     const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width || 0;
-    const MARGIN_WIDTH_IN_PX = 2;
+    const MARGIN_WIDTH_IN_PX = 3;
     if (svgWidth) {
       const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
       this.setState({ barSpacingInPercent: currentBarSpacing });
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
index 9196f30fb847e5..e571b68a29e660 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
@@ -51,7 +51,6 @@ export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleP
       cursor: href ? 'pointer' : 'default',
       selectors: {
         '&:focus': {
-          outlineColor: theme.palette.black,
           stroke: theme.palette.black,
           strokeWidth: '2px',
         },
@@ -71,7 +70,6 @@ export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleP
       cursor: 'default',
       selectors: {
         '&:focus': {
-          outlineColor: theme.palette.black,
           stroke: theme.palette.black,
           strokeWidth: '2px',
         },
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
index e22872d8996b14..fe71c5212a60c6 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
@@ -66,7 +66,7 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
 
   public componentDidMount(): void {
     const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width || 0;
-    const MARGIN_WIDTH_IN_PX = 2;
+    const MARGIN_WIDTH_IN_PX = 3;
     if (svgWidth) {
       const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
       this.setState({ barSpacingInPercent: currentBarSpacing });
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts
index 0f18c36f1b2dac..a480164ce1f862 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts
@@ -54,7 +54,6 @@ export const getStyles = (props: IStackedBarChartStyleProps): IStackedBarChartSt
       cursor: href ? 'pointer' : 'default',
       selectors: {
         '&:focus': {
-          outlineColor: theme.palette.black,
           stroke: theme.palette.black,
           strokeWidth: '2px',
         },
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
index a1e378fd01d8a0..61440566a3ae7e 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
@@ -163,7 +163,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -195,7 +194,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -370,7 +368,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -402,7 +399,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -829,7 +825,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -861,7 +856,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1036,7 +1030,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1068,7 +1061,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1387,7 +1379,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1417,7 +1408,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1563,7 +1553,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1593,7 +1582,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1832,7 +1820,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -1862,7 +1849,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2026,7 +2012,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2056,7 +2041,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2339,7 +2323,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2369,7 +2352,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2541,7 +2523,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2571,7 +2552,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2826,7 +2806,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -2856,7 +2835,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3018,7 +2996,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3048,7 +3025,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3313,7 +3289,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3343,7 +3318,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3515,7 +3489,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3545,7 +3518,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3713,7 +3685,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3743,7 +3714,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3915,7 +3885,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -3945,7 +3914,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4391,7 +4359,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4421,7 +4388,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4593,7 +4559,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
@@ -4623,7 +4588,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                     opacity: ;
                   }
                   &:focus {
-                    outline-color: #000000;
                     stroke-width: 2px;
                     stroke: #000000;
                   }
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap
index 3dfe907adb9698..0ae1f30e286945 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChartRTL.test.tsx.snap
@@ -116,7 +116,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -142,7 +141,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -168,7 +166,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -194,7 +191,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -220,7 +216,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -342,7 +337,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -368,7 +362,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -394,7 +387,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -420,7 +412,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -446,7 +437,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -595,7 +585,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -621,7 +610,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1256,7 +1244,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1282,7 +1269,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1308,7 +1294,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1334,7 +1319,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1360,7 +1344,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1482,7 +1465,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1508,7 +1490,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1534,7 +1515,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1560,7 +1540,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1586,7 +1565,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1735,7 +1713,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -1761,7 +1738,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2396,7 +2372,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2422,7 +2397,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2448,7 +2422,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2474,7 +2447,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2500,7 +2472,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2622,7 +2593,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2648,7 +2618,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2674,7 +2643,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2700,7 +2668,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2726,7 +2693,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2875,7 +2841,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -2901,7 +2866,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                       opacity: ;
                     }
                     &:focus {
-                      outline-color: #000000;
                       stroke-width: 2px;
                       stroke: #000000;
                     }
@@ -3549,7 +3513,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3575,7 +3538,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3601,7 +3563,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3627,7 +3588,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3653,7 +3613,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3775,7 +3734,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3801,7 +3759,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3827,7 +3784,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3853,7 +3809,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -3879,7 +3834,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -4028,7 +3982,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
@@ -4054,7 +4007,6 @@ exports[`Should reflect theme change 1`] = `
                         opacity: ;
                       }
                       &:focus {
-                        outline-color: #ffffff;
                         stroke-width: 2px;
                         stroke: #ffffff;
                       }
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
index b5914c17979880..e85002303f7e4a 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
@@ -135,71 +135,71 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
               width: 100%;
             }
       >
-        <g
-          aria-label="first Lorem ipsum dolor sit amet, 40."
-          className=
+        <g>
+          <g
+            aria-label="first Lorem ipsum dolor sit amet, 40."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          key="0"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#5c005c"
-            height={12}
-            id="_SBC_bar7"
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
             key="0"
-            width="63.49206349206349%"
-            x="0%"
-            y={0}
-          />
-        </g>
-        <g
-          aria-label="Winter is coming, 23."
-          className=
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#5c005c"
+              height={12}
+              id="_SBC_bar7"
+              key="0"
+              width="63.49206349206349%"
+              x="0%"
+              y={0}
+            />
+          </g>
+          <g
+            aria-label="Winter is coming, 23."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          key="1"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#e81123"
-            height={12}
-            id="_SBC_bar8"
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
             key="1"
-            width="36.507936507936506%"
-            x="63.49206349206349%"
-            y={0}
-          />
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#e81123"
+              height={12}
+              id="_SBC_bar8"
+              key="1"
+              width="36.507936507936506%"
+              x="63.49206349206349%"
+              y={0}
+            />
+          </g>
         </g>
         <div
           className=
@@ -504,71 +504,71 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
               width: 100%;
             }
       >
-        <g
-          aria-label="first Lorem ipsum dolor sit amet, 40."
-          className=
+        <g>
+          <g
+            aria-label="first Lorem ipsum dolor sit amet, 40."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          key="0"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#5c005c"
-            height={12}
-            id="_SBC_bar7"
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
             key="0"
-            width="63.49206349206349%"
-            x="0%"
-            y={0}
-          />
-        </g>
-        <g
-          aria-label="Winter is coming, 23."
-          className=
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#5c005c"
+              height={12}
+              id="_SBC_bar7"
+              key="0"
+              width="63.49206349206349%"
+              x="0%"
+              y={0}
+            />
+          </g>
+          <g
+            aria-label="Winter is coming, 23."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          key="1"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#e81123"
-            height={12}
-            id="_SBC_bar8"
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
             key="1"
-            width="36.507936507936506%"
-            x="63.49206349206349%"
-            y={0}
-          />
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#e81123"
+              height={12}
+              id="_SBC_bar8"
+              key="1"
+              width="36.507936507936506%"
+              x="63.49206349206349%"
+              y={0}
+            />
+          </g>
         </g>
         <div
           className=
@@ -790,67 +790,67 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
               width: 100%;
             }
       >
-        <g
-          aria-label="first Lorem ipsum dolor sit amet, 40."
-          className=
+        <g>
+          <g
+            aria-label="first Lorem ipsum dolor sit amet, 40."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#5c005c"
-            height={12}
-            id="_SBC_bar2"
-            width="63.49206349206349%"
-            x="0%"
-            y={0}
-          />
-        </g>
-        <g
-          aria-label="Winter is coming, 23."
-          className=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#5c005c"
+              height={12}
+              id="_SBC_bar2"
+              width="63.49206349206349%"
+              x="0%"
+              y={0}
+            />
+          </g>
+          <g
+            aria-label="Winter is coming, 23."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#e81123"
-            height={12}
-            id="_SBC_bar3"
-            width="36.507936507936506%"
-            x="63.49206349206349%"
-            y={0}
-          />
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#e81123"
+              height={12}
+              id="_SBC_bar3"
+              width="36.507936507936506%"
+              x="63.49206349206349%"
+              y={0}
+            />
+          </g>
         </g>
         <span
           className="ms-layer"
@@ -996,67 +996,67 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
               width: 100%;
             }
       >
-        <g
-          aria-label="first Lorem ipsum dolor sit amet, 40."
-          className=
+        <g>
+          <g
+            aria-label="first Lorem ipsum dolor sit amet, 40."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#5c005c"
-            height={12}
-            id="_SBC_bar45"
-            width="63.49206349206349%"
-            x="0%"
-            y={0}
-          />
-        </g>
-        <g
-          aria-label="Winter is coming, 23."
-          className=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#5c005c"
+              height={12}
+              id="_SBC_bar45"
+              width="63.49206349206349%"
+              x="0%"
+              y={0}
+            />
+          </g>
+          <g
+            aria-label="Winter is coming, 23."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#e81123"
-            height={12}
-            id="_SBC_bar46"
-            width="36.507936507936506%"
-            x="63.49206349206349%"
-            y={0}
-          />
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#e81123"
+              height={12}
+              id="_SBC_bar46"
+              width="36.507936507936506%"
+              x="63.49206349206349%"
+              y={0}
+            />
+          </g>
         </g>
         <span
           className="ms-layer"
@@ -1192,67 +1192,67 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
               width: 100%;
             }
       >
-        <g
-          aria-label="first Lorem ipsum dolor sit amet, 40."
-          className=
+        <g>
+          <g
+            aria-label="first Lorem ipsum dolor sit amet, 40."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#5c005c"
-            height={12}
-            id="_SBC_bar30"
-            width="63.49206349206349%"
-            x="0%"
-            y={0}
-          />
-        </g>
-        <g
-          aria-label="Winter is coming, 23."
-          className=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#5c005c"
+              height={12}
+              id="_SBC_bar30"
+              width="63.49206349206349%"
+              x="0%"
+              y={0}
+            />
+          </g>
+          <g
+            aria-label="Winter is coming, 23."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#e81123"
-            height={12}
-            id="_SBC_bar31"
-            width="36.507936507936506%"
-            x="63.49206349206349%"
-            y={0}
-          />
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#e81123"
+              height={12}
+              id="_SBC_bar31"
+              width="36.507936507936506%"
+              x="63.49206349206349%"
+              y={0}
+            />
+          </g>
         </g>
         <span
           className="ms-layer"
@@ -1398,67 +1398,67 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
               width: 100%;
             }
       >
-        <g
-          aria-label="first Lorem ipsum dolor sit amet, 40."
-          className=
+        <g>
+          <g
+            aria-label="first Lorem ipsum dolor sit amet, 40."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#5c005c"
-            height={12}
-            id="_SBC_bar9"
-            width="63.49206349206349%"
-            x="0%"
-            y={0}
-          />
-        </g>
-        <g
-          aria-label="Winter is coming, 23."
-          className=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#5c005c"
+              height={12}
+              id="_SBC_bar9"
+              width="63.49206349206349%"
+              x="0%"
+              y={0}
+            />
+          </g>
+          <g
+            aria-label="Winter is coming, 23."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#e81123"
-            height={12}
-            id="_SBC_bar10"
-            width="36.507936507936506%"
-            x="63.49206349206349%"
-            y={0}
-          />
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#e81123"
+              height={12}
+              id="_SBC_bar10"
+              width="36.507936507936506%"
+              x="63.49206349206349%"
+              y={0}
+            />
+          </g>
         </g>
         <span
           className="ms-layer"
@@ -1578,67 +1578,67 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
               width: 100%;
             }
       >
-        <g
-          aria-label="first Lorem ipsum dolor sit amet, 40."
-          className=
+        <g>
+          <g
+            aria-label="first Lorem ipsum dolor sit amet, 40."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#5c005c"
-            height={12}
-            id="_SBC_bar23"
-            width="63.49206349206349%"
-            x="0%"
-            y={0}
-          />
-        </g>
-        <g
-          aria-label="Winter is coming, 23."
-          className=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#5c005c"
+              height={12}
+              id="_SBC_bar23"
+              width="63.49206349206349%"
+              x="0%"
+              y={0}
+            />
+          </g>
+          <g
+            aria-label="Winter is coming, 23."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#e81123"
-            height={12}
-            id="_SBC_bar24"
-            width="36.507936507936506%"
-            x="63.49206349206349%"
-            y={0}
-          />
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#e81123"
+              height={12}
+              id="_SBC_bar24"
+              width="36.507936507936506%"
+              x="63.49206349206349%"
+              y={0}
+            />
+          </g>
         </g>
         <span
           className="ms-layer"
@@ -1784,67 +1784,67 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
               width: 100%;
             }
       >
-        <g
-          aria-label="first Lorem ipsum dolor sit amet, 40."
-          className=
+        <g>
+          <g
+            aria-label="first Lorem ipsum dolor sit amet, 40."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#5c005c"
-            height={12}
-            id="_SBC_bar16"
-            width="63.49206349206349%"
-            x="0%"
-            y={0}
-          />
-        </g>
-        <g
-          aria-label="Winter is coming, 23."
-          className=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#5c005c"
+              height={12}
+              id="_SBC_bar16"
+              width="63.49206349206349%"
+              x="0%"
+              y={0}
+            />
+          </g>
+          <g
+            aria-label="Winter is coming, 23."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#e81123"
-            height={12}
-            id="_SBC_bar17"
-            width="36.507936507936506%"
-            x="63.49206349206349%"
-            y={0}
-          />
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={false}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#e81123"
+              height={12}
+              id="_SBC_bar17"
+              width="36.507936507936506%"
+              x="63.49206349206349%"
+              y={0}
+            />
+          </g>
         </g>
         <span
           className="ms-layer"
@@ -1964,67 +1964,67 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
               width: 100%;
             }
       >
-        <g
-          aria-label="first Lorem ipsum dolor sit amet, 40."
-          className=
+        <g>
+          <g
+            aria-label="first Lorem ipsum dolor sit amet, 40."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#5c005c"
-            height={12}
-            id="_SBC_bar37"
-            width="63.49206349206349%"
-            x="0%"
-            y={0}
-          />
-        </g>
-        <g
-          aria-label="Winter is coming, 23."
-          className=
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#5c005c"
+              height={12}
+              id="_SBC_bar37"
+              width="63.49206349206349%"
+              x="0%"
+              y={0}
+            />
+          </g>
+          <g
+            aria-label="Winter is coming, 23."
+            className=
 
-              {
-                cursor: default;
-                opacity: ;
-              }
-              &:focus {
-                outline-color: #000000;
-                stroke-width: 2px;
-                stroke: #000000;
-              }
-          data-is-focusable={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseMove={[Function]}
-          onMouseOver={[Function]}
-          pointerEvents="all"
-          role="img"
-        >
-          <rect
-            fill="#e81123"
-            height={12}
-            id="_SBC_bar38"
-            width="36.507936507936506%"
-            x="63.49206349206349%"
-            y={0}
-          />
+                {
+                  cursor: default;
+                  opacity: ;
+                }
+                &:focus {
+                  stroke-width: 2px;
+                  stroke: #000000;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            pointerEvents="all"
+            role="img"
+          >
+            <rect
+              fill="#e81123"
+              height={12}
+              id="_SBC_bar38"
+              width="36.507936507936506%"
+              x="63.49206349206349%"
+              y={0}
+            />
+          </g>
         </g>
         <span
           className="ms-layer"
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap
index 2ffac700f0626f..204fd4efc7b33a 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChartRTL.test.tsx.snap
@@ -89,113 +89,111 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
               }
           focusable="false"
         >
-          <g
-            aria-label="2020/04/30, 40%."
-            class=
+          <g>
+            <g
+              aria-label="2020/04/30, 40%."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="0"
-          >
-            <rect
-              fill="#0078d4"
-              height="12"
-              id="_SBC_bar213"
-              width="37.22084367245658%"
-              x="0%"
-              y="0"
-            />
-          </g>
-          <g
-            aria-label="second, 100."
-            class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="0"
+            >
+              <rect
+                fill="#0078d4"
+                height="12"
+                id="_SBC_bar213"
+                width="37.22084367245658%"
+                x="0%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="second, 100."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="-1"
-          >
-            <rect
-              fill="#107c10"
-              height="12"
-              id="_SBC_bar214"
-              width="12.40694789081886%"
-              x="37.22084367245658%"
-              y="0"
-            />
-          </g>
-          <g
-            aria-label="third, -200."
-            class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#107c10"
+                height="12"
+                id="_SBC_bar214"
+                width="12.40694789081886%"
+                x="37.22084367245658%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="third, -200."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="-1"
-          >
-            <rect
-              fill="#e81123"
-              height="12"
-              id="_SBC_bar215"
-              width="0.7444168734491317%"
-              x="49.62779156327544%"
-              y="0"
-            />
-          </g>
-          <g
-            aria-label="fourth, 400."
-            class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#e81123"
+                height="12"
+                id="_SBC_bar215"
+                width="0.7444168734491317%"
+                x="49.62779156327544%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="fourth, 400."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="-1"
-          >
-            <rect
-              fill="#d83b01"
-              height="12"
-              id="_SBC_bar216"
-              width="49.62779156327544%"
-              x="50.37220843672457%"
-              y="0"
-            />
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#d83b01"
+                height="12"
+                id="_SBC_bar216"
+                width="49.62779156327544%"
+                x="50.37220843672457%"
+                y="0"
+              />
+            </g>
           </g>
           <span
             class="ms-layer"
@@ -700,113 +698,111 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
               }
           focusable="false"
         >
-          <g
-            aria-label="2020/04/30, 40%."
-            class=
+          <g>
+            <g
+              aria-label="2020/04/30, 40%."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="0"
-          >
-            <rect
-              fill="#0078d4"
-              height="12"
-              id="_SBC_bar223"
-              width="37.22084367245658%"
-              x="0%"
-              y="0"
-            />
-          </g>
-          <g
-            aria-label="second, 100."
-            class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="0"
+            >
+              <rect
+                fill="#0078d4"
+                height="12"
+                id="_SBC_bar223"
+                width="37.22084367245658%"
+                x="0%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="second, 100."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="-1"
-          >
-            <rect
-              fill="#107c10"
-              height="12"
-              id="_SBC_bar224"
-              width="12.40694789081886%"
-              x="37.22084367245658%"
-              y="0"
-            />
-          </g>
-          <g
-            aria-label="third, -200."
-            class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#107c10"
+                height="12"
+                id="_SBC_bar224"
+                width="12.40694789081886%"
+                x="37.22084367245658%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="third, -200."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="-1"
-          >
-            <rect
-              fill="#e81123"
-              height="12"
-              id="_SBC_bar225"
-              width="0.7444168734491317%"
-              x="49.62779156327544%"
-              y="0"
-            />
-          </g>
-          <g
-            aria-label="fourth, 400."
-            class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#e81123"
+                height="12"
+                id="_SBC_bar225"
+                width="0.7444168734491317%"
+                x="49.62779156327544%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="fourth, 400."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="-1"
-          >
-            <rect
-              fill="#d83b01"
-              height="12"
-              id="_SBC_bar226"
-              width="49.62779156327544%"
-              x="50.37220843672457%"
-              y="0"
-            />
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#d83b01"
+                height="12"
+                id="_SBC_bar226"
+                width="49.62779156327544%"
+                x="50.37220843672457%"
+                y="0"
+              />
+            </g>
           </g>
           <span
             class="ms-layer"
@@ -1324,113 +1320,111 @@ exports[`Should reflect theme change 1`] = `
                 }
             focusable="false"
           >
-            <g
-              aria-label="2020/04/30, 40%."
-              class=
+            <g>
+              <g
+                aria-label="2020/04/30, 40%."
+                class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #ffffff;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="0"
-            >
-              <rect
-                fill="#0078d4"
-                height="12"
-                id="_SBC_bar236"
-                width="37.22084367245658%"
-                x="0%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="second, 100."
-              class=
+                    {
+                      cursor: default;
+                      opacity: ;
+                    }
+                    &:focus {
+                      stroke-width: 2px;
+                      stroke: #ffffff;
+                    }
+                data-is-focusable="true"
+                pointer-events="all"
+                role="img"
+                tabindex="0"
+              >
+                <rect
+                  fill="#0078d4"
+                  height="12"
+                  id="_SBC_bar236"
+                  width="37.22084367245658%"
+                  x="0%"
+                  y="0"
+                />
+              </g>
+              <g
+                aria-label="second, 100."
+                class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #ffffff;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#107c10"
-                height="12"
-                id="_SBC_bar237"
-                width="12.40694789081886%"
-                x="37.22084367245658%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="third, -200."
-              class=
+                    {
+                      cursor: default;
+                      opacity: ;
+                    }
+                    &:focus {
+                      stroke-width: 2px;
+                      stroke: #ffffff;
+                    }
+                data-is-focusable="true"
+                pointer-events="all"
+                role="img"
+                tabindex="-1"
+              >
+                <rect
+                  fill="#107c10"
+                  height="12"
+                  id="_SBC_bar237"
+                  width="12.40694789081886%"
+                  x="37.22084367245658%"
+                  y="0"
+                />
+              </g>
+              <g
+                aria-label="third, -200."
+                class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #ffffff;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#e81123"
-                height="12"
-                id="_SBC_bar238"
-                width="0.7444168734491317%"
-                x="49.62779156327544%"
-                y="0"
-              />
-            </g>
-            <g
-              aria-label="fourth, 400."
-              class=
+                    {
+                      cursor: default;
+                      opacity: ;
+                    }
+                    &:focus {
+                      stroke-width: 2px;
+                      stroke: #ffffff;
+                    }
+                data-is-focusable="true"
+                pointer-events="all"
+                role="img"
+                tabindex="-1"
+              >
+                <rect
+                  fill="#e81123"
+                  height="12"
+                  id="_SBC_bar238"
+                  width="0.7444168734491317%"
+                  x="49.62779156327544%"
+                  y="0"
+                />
+              </g>
+              <g
+                aria-label="fourth, 400."
+                class=
 
-                  {
-                    cursor: default;
-                    opacity: ;
-                  }
-                  &:focus {
-                    outline-color: #ffffff;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
-                  }
-              data-is-focusable="true"
-              pointer-events="all"
-              role="img"
-              tabindex="-1"
-            >
-              <rect
-                fill="#d83b01"
-                height="12"
-                id="_SBC_bar239"
-                width="49.62779156327544%"
-                x="50.37220843672457%"
-                y="0"
-              />
+                    {
+                      cursor: default;
+                      opacity: ;
+                    }
+                    &:focus {
+                      stroke-width: 2px;
+                      stroke: #ffffff;
+                    }
+                data-is-focusable="true"
+                pointer-events="all"
+                role="img"
+                tabindex="-1"
+              >
+                <rect
+                  fill="#d83b01"
+                  height="12"
+                  id="_SBC_bar239"
+                  width="49.62779156327544%"
+                  x="50.37220843672457%"
+                  y="0"
+                />
+              </g>
             </g>
             <span
               class="ms-layer"
@@ -1936,27 +1930,28 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with em
               }
           focusable="false"
         >
-          <g
-            class=
+          <g>
+            <g
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-          >
-            <rect
-              fill="#edebe9"
-              height="12"
-              id="_SBC_empty_bar_16"
-              width="100%"
-              x="0%"
-              y="0"
-            />
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+            >
+              <rect
+                fill="#edebe9"
+                height="12"
+                id="_SBC_empty_bar_16"
+                width="100%"
+                x="0%"
+                y="0"
+              />
+            </g>
           </g>
           <span
             class="ms-layer"
@@ -2461,113 +2456,111 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with no
               }
           focusable="false"
         >
-          <g
-            aria-label="2020/04/30, 40%."
-            class=
+          <g>
+            <g
+              aria-label="2020/04/30, 40%."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="0"
-          >
-            <rect
-              fill="#0078d4"
-              height="12"
-              id="_SBC_bar2"
-              width="37.22084367245658%"
-              x="0%"
-              y="0"
-            />
-          </g>
-          <g
-            aria-label="second, 100."
-            class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="0"
+            >
+              <rect
+                fill="#0078d4"
+                height="12"
+                id="_SBC_bar2"
+                width="37.22084367245658%"
+                x="0%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="second, 100."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="-1"
-          >
-            <rect
-              fill="#107c10"
-              height="12"
-              id="_SBC_bar3"
-              width="12.40694789081886%"
-              x="37.22084367245658%"
-              y="0"
-            />
-          </g>
-          <g
-            aria-label="third, -200."
-            class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#107c10"
+                height="12"
+                id="_SBC_bar3"
+                width="12.40694789081886%"
+                x="37.22084367245658%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="third, -200."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="-1"
-          >
-            <rect
-              fill="#e81123"
-              height="12"
-              id="_SBC_bar4"
-              width="0.7444168734491317%"
-              x="49.62779156327544%"
-              y="0"
-            />
-          </g>
-          <g
-            aria-label="fourth, 400."
-            class=
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#e81123"
+                height="12"
+                id="_SBC_bar4"
+                width="0.7444168734491317%"
+                x="49.62779156327544%"
+                y="0"
+              />
+            </g>
+            <g
+              aria-label="fourth, 400."
+              class=
 
-                {
-                  cursor: default;
-                  opacity: ;
-                }
-                &:focus {
-                  outline-color: #000000;
-                  stroke-width: 2px;
-                  stroke: #000000;
-                }
-            data-is-focusable="true"
-            pointer-events="all"
-            role="img"
-            tabindex="-1"
-          >
-            <rect
-              fill="#d83b01"
-              height="12"
-              id="_SBC_bar5"
-              width="49.62779156327544%"
-              x="50.37220843672457%"
-              y="0"
-            />
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+                  &:focus {
+                    stroke-width: 2px;
+                    stroke: #000000;
+                  }
+              data-is-focusable="true"
+              pointer-events="all"
+              role="img"
+              tabindex="-1"
+            >
+              <rect
+                fill="#d83b01"
+                height="12"
+                id="_SBC_bar5"
+                width="49.62779156327544%"
+                x="50.37220843672457%"
+                y="0"
+              />
+            </g>
           </g>
           <span
             class="ms-layer"

From b638967f8f4d5e89682ccb1a43e2e3f9efa23051 Mon Sep 17 00:00:00 2001
From: yush singla <yushsingla@microsoft.com>
Date: Thu, 24 Aug 2023 15:03:07 +0530
Subject: [PATCH 22/22] multistaked bar chart variable initialisation

---
 .../components/StackedBarChart/MultiStackedBarChart.base.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index 81df805217e69b..944b857a1c50ce 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -202,7 +202,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     data.chartData!.map((point: IChartDataPoint, index: number) => {
       const pointData = point.data ? point.data : 0;
       const currValue = (pointData / total) * 100;
-      value = currValue ? currValue : 0;
+      let value = currValue ? currValue : 0;
 
       if (value < 1 && value !== 0) {
         value = 1;