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 0000000000000..609bfb15d61b8
--- /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": "yushsingla@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index c9208fb923533..72f3f627659fe 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -30,6 +30,7 @@ export interface IHorizontalBarChartState {
   yCalloutValue?: string;
   barCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
+  barSpacingInPercent: number;
 }
 
 export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {
@@ -40,6 +41,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
   private _refArray: IRefArrayData[];
   private _calloutAnchorPoint: IChartDataPoint | null;
   private _isRTL: boolean = getRTL();
+  private barChartSvgRef: React.RefObject<SVGSVGElement>;
   private _emptyChartId: string;
 
   constructor(props: IHorizontalBarChartProps) {
@@ -54,12 +56,23 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       color: '',
       xCalloutValue: '',
       yCalloutValue: '',
+      barSpacingInPercent: 0,
     };
     this._refArray = [];
     this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);
     this._hoverOff = this._hoverOff.bind(this);
     this._calloutId = getId('callout');
     this._emptyChartId = getId('_HBC_empty');
+    this.barChartSvgRef = React.createRef<SVGSVGElement>();
+  }
+
+  public componentDidMount(): void {
+    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width || 0;
+    const MARGIN_WIDTH_IN_PX = 3;
+    if (svgWidth) {
+      const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
+      this.setState({ barSpacingInPercent: currentBarSpacing });
+    }
   }
 
   public render(): JSX.Element {
@@ -113,7 +126,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}
@@ -286,7 +299,18 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     );
   }
 
+  /**
+   * 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 in between the bars
+   */
+
   private _createBars(data: IChartProps, palette: IPalette): 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];
     // calculating starting point of each bar and it's range
     const startingPoint: number[] = [];
@@ -312,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)];
@@ -359,7 +391,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.barSpacingInPercent
+              : startingPoint[index] + index * this.state.barSpacingInPercent
+          }%`}
           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 af70ce4a1da9f..72bb1161dfcb1 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
@@ -27,10 +27,7 @@ export const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps
       display: 'block',
       overflow: 'visible',
     },
-    barWrapper: {
-      stroke: theme.palette.white,
-      strokeWidth: 2,
-    },
+    barWrapper: {},
     chartTitle: {
       ...theme.fonts.small,
       display: 'flex',
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 495795292a967..a4730971e4a96 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,10 +137,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}
@@ -158,10 +155,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}
@@ -304,10 +298,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}
@@ -325,10 +316,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}
@@ -647,10 +635,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}
@@ -668,10 +653,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}
@@ -814,10 +796,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}
@@ -835,10 +814,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}
@@ -1063,10 +1039,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}
@@ -1195,10 +1168,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}
@@ -1344,10 +1314,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}
@@ -1494,10 +1461,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}
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index 7064560bed3d6..944b857a1c50c 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -38,6 +38,7 @@ export interface IMultiStackedBarChartState {
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
+  barSpacingInPercent: number;
 }
 
 export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {
@@ -52,6 +53,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
   private _calloutAnchorPoint: IChartDataPoint | null;
   private _longestBarTotalValue: number;
   private _isRTL: boolean = getRTL();
+  private barChartSvgRef: React.RefObject<SVGSVGElement>;
   private _emptyChartId: string;
   private _barId: string;
   private _barIdPlaceholderPartToWhole: string;
@@ -70,16 +72,27 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       xCalloutValue: '',
       yCalloutValue: '',
       calloutLegend: '',
+      barSpacingInPercent: 0,
     };
     this._onLeave = this._onLeave.bind(this);
     this._onBarLeave = this._onBarLeave.bind(this);
     this._calloutId = getId('callout');
+    this.barChartSvgRef = React.createRef<SVGSVGElement>();
     this._emptyChartId = getId('_MSBC_empty');
     this._barId = getId('_MSBC_rect_');
     this._barIdPlaceholderPartToWhole = getId('_MSBC_rect_partToWhole_');
     this._barIdEmpty = getId('_MSBC_rect_empty');
   }
 
+  public componentDidMount(): void {
+    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width || 0;
+    const MARGIN_WIDTH_IN_PX = 3;
+    if (svgWidth) {
+      const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
+      this.setState({ barSpacingInPercent: currentBarSpacing });
+    }
+  }
+
   public render(): JSX.Element {
     if (!this._isChartEmpty()) {
       const { data, theme, culture } = this.props;
@@ -155,6 +168,13 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     );
   }
 
+  /**
+   * 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,
@@ -163,6 +183,10 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     hideDenominator: boolean,
     href?: string,
   ): 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 { 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
@@ -177,7 +201,9 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     let sumOfPercent = 0;
     data.chartData!.map((point: IChartDataPoint, index: number) => {
       const pointData = point.data ? point.data : 0;
-      let value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;
+      const currValue = (pointData / total) * 100;
+      let value = currValue ? currValue : 0;
+
       if (value < 1 && value !== 0) {
         value = 1;
       } else if (value > 99 && value !== 100) {
@@ -201,7 +227,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;
@@ -257,7 +292,11 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
           <rect
             key={index}
             id={`${this._barId}-${index}`}
-            x={`${this._isRTL ? 100 - startingPoint[index] - value : 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}
@@ -273,9 +312,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 - totalMarginPercent
+                : (startingPoint[startingPoint.length - 1] || 0) + value + totalMarginPercent
             }%`}
+            textAnchor={this._isRTL ? 'end' : 'start'}
             y={barHeight / 2}
             dominantBaseline="central"
             transform={`translate(${this._isRTL ? -4 : 4})`}
@@ -362,7 +402,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 39c68270760b9..e571b68a29e66 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,
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
index 7ddd4ccd358fe..fe71c5212a60c 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 = 3;
+    if (svgWidth) {
+      const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
+      this.setState({ barSpacingInPercent: currentBarSpacing });
+    }
   }
 
   public render(): JSX.Element {
@@ -145,7 +159,7 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
           </FocusZone>
           <FocusZone direction={FocusZoneDirection.horizontal}>
             <div>
-              <svg className={this._classNames.chart} aria-label={data?.chartTitle}>
+              <svg ref={this.barChartSvgRef} className={this._classNames.chart} aria-label={data?.chartTitle}>
                 <g>{bars[0]}</g>
                 <Callout
                   gapSpace={15}
@@ -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 / (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)];
@@ -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 595d591d6f011..a480164ce1f86 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,8 +52,6 @@ export const getStyles = (props: IStackedBarChartStyleProps): IStackedBarChartSt
     opacityChangeOnHover: {
       opacity: shouldHighlight ? '' : '0.1',
       cursor: href ? 'pointer' : 'default',
-      stroke: theme.palette.white,
-      strokeWidth: 2,
       selectors: {
         '&:focus': {
           stroke: theme.palette.black,
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 cce6a0c87fd6c..61440566a3ae7 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
@@ -161,8 +161,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -194,8 +192,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -370,8 +366,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -403,8 +397,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -831,8 +823,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -864,8 +854,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1040,8 +1028,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1073,8 +1059,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1393,8 +1377,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1424,8 +1406,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,8 +1551,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1602,8 +1580,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1842,8 +1818,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1873,8 +1847,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1908,6 +1880,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   }
               dominantBaseline="central"
               role="img"
+              textAnchor="start"
               transform="translate(4)"
               x="100%"
               y={6}
@@ -2037,8 +2010,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2068,8 +2039,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2103,6 +2072,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   }
               dominantBaseline="central"
               role="img"
+              textAnchor="start"
               transform="translate(4)"
               x="100%"
               y={6}
@@ -2351,8 +2321,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2382,8 +2350,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2555,8 +2521,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2586,8 +2550,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2842,8 +2804,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2873,8 +2833,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3036,8 +2994,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3067,8 +3023,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3333,8 +3287,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3364,8 +3316,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3537,8 +3487,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3568,8 +3516,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3737,8 +3683,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3768,8 +3712,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3941,8 +3883,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -3972,8 +3912,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -4419,8 +4357,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -4450,8 +4386,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -4623,8 +4557,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -4654,8 +4586,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
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 465b1ee9d2a07..0ae1f30e28694 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,8 +114,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -141,8 +139,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -168,8 +164,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -195,8 +189,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -222,8 +214,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -345,8 +335,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -372,8 +360,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -399,8 +385,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -426,8 +410,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -453,8 +435,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -603,8 +583,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -630,8 +608,6 @@ exports[`Multi Stacked bar chart rendering Should render the Multi Stacked bar c
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1266,8 +1242,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1293,8 +1267,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1320,8 +1292,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1347,8 +1317,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1374,8 +1342,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1497,8 +1463,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1524,8 +1488,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1551,8 +1513,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1578,8 +1538,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1605,8 +1563,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1755,8 +1711,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1782,8 +1736,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2418,8 +2370,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2445,8 +2395,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2472,8 +2420,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2499,8 +2445,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2526,8 +2470,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2649,8 +2591,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2676,8 +2616,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2703,8 +2641,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2730,8 +2666,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2757,8 +2691,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2907,8 +2839,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -2934,8 +2864,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #ffffff;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -3583,8 +3511,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 2px;
@@ -3610,8 +3536,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 2px;
@@ -3637,8 +3561,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 2px;
@@ -3664,8 +3586,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 2px;
@@ -3691,8 +3611,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 2px;
@@ -3814,8 +3732,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 2px;
@@ -3841,8 +3757,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 2px;
@@ -3868,8 +3782,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 2px;
@@ -3895,8 +3807,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 2px;
@@ -3922,8 +3832,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 2px;
@@ -4072,8 +3980,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 2px;
@@ -4099,8 +4005,6 @@ exports[`Should reflect theme change 1`] = `
                       {
                         cursor: default;
                         opacity: ;
-                        stroke-width: 2px;
-                        stroke: #1b1a19;
                       }
                       &:focus {
                         stroke-width: 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 2b3a46ccbecef..e85002303f7e4 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,6 +131,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
@@ -142,8 +143,6 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -176,8 +175,6 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -503,6 +500,7 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
@@ -514,8 +512,6 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -548,8 +544,6 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -792,6 +786,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
@@ -803,8 +798,6 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -835,8 +828,6 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -1001,6 +992,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
@@ -1012,8 +1004,6 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -1044,8 +1034,6 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -1200,6 +1188,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
@@ -1211,8 +1200,6 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -1243,8 +1230,6 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -1409,6 +1394,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
@@ -1420,8 +1406,6 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -1452,8 +1436,6 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -1592,6 +1574,7 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
@@ -1603,8 +1586,6 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -1635,8 +1616,6 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -1801,6 +1780,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
@@ -1812,8 +1792,6 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -1844,8 +1822,6 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -1984,6 +1960,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
               display: block;
               height: 12px;
               margin-bottom: 10px;
+              overflow: visible;
               width: 100%;
             }
       >
@@ -1995,8 +1972,6 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
@@ -2027,8 +2002,6 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
                 {
                   cursor: default;
                   opacity: ;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
                 }
                 &:focus {
                   stroke-width: 2px;
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 9c19f42a1b871..204fd4efc7b33 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,6 +84,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 display: block;
                 height: 12px;
                 margin-bottom: 10px;
+                overflow: visible;
                 width: 100%;
               }
           focusable="false"
@@ -96,8 +97,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -124,8 +123,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -152,8 +149,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -180,8 +175,6 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -700,6 +693,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 display: block;
                 height: 12px;
                 margin-bottom: 10px;
+                overflow: visible;
                 width: 100%;
               }
           focusable="false"
@@ -712,8 +706,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -740,8 +732,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -768,8 +758,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -796,8 +784,6 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -1329,6 +1315,7 @@ exports[`Should reflect theme change 1`] = `
                   display: block;
                   height: 12px;
                   margin-bottom: 10px;
+                  overflow: visible;
                   width: 100%;
                 }
             focusable="false"
@@ -1341,8 +1328,6 @@ exports[`Should reflect theme change 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #1b1a19;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1369,8 +1354,6 @@ exports[`Should reflect theme change 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #1b1a19;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1397,8 +1380,6 @@ exports[`Should reflect theme change 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #1b1a19;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1425,8 +1406,6 @@ exports[`Should reflect theme change 1`] = `
                     {
                       cursor: default;
                       opacity: ;
-                      stroke-width: 2px;
-                      stroke: #1b1a19;
                     }
                     &:focus {
                       stroke-width: 2px;
@@ -1946,6 +1925,7 @@ 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"
@@ -1957,8 +1937,6 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with em
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2473,6 +2451,7 @@ 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"
@@ -2485,8 +2464,6 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with no
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2513,8 +2490,6 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with no
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2541,8 +2516,6 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with no
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
@@ -2569,8 +2542,6 @@ exports[`Stacked bar chart rendering Should render the stacked bar chart with no
                   {
                     cursor: default;
                     opacity: ;
-                    stroke-width: 2px;
-                    stroke: #ffffff;
                   }
                   &:focus {
                     stroke-width: 2px;
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 e9c9973474660..d168bde86803d 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/MultiStackedBarChartPage.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartPage.tsx
index 91bb42c6b7b5b..c83c24cad82e0 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"