diff --git a/change/@fluentui-react-charting-7ed503a2-d9d1-4679-8074-c67eb83161e1.json b/change/@fluentui-react-charting-7ed503a2-d9d1-4679-8074-c67eb83161e1.json
new file mode 100644
index 00000000000000..2695291386c7f0
--- /dev/null
+++ b/change/@fluentui-react-charting-7ed503a2-d9d1-4679-8074-c67eb83161e1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fixed accessibility issues in pie chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "yushsingla@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/PieChart/Arc/Arc.styles.ts b/packages/react-charting/src/components/PieChart/Arc/Arc.styles.ts
index 33a1f8e766333a..845797bf73a612 100644
--- a/packages/react-charting/src/components/PieChart/Arc/Arc.styles.ts
+++ b/packages/react-charting/src/components/PieChart/Arc/Arc.styles.ts
@@ -1,8 +1,11 @@
 import { IArcProps, IArcStyles } from './Arc.types';
-import { DefaultPalette } from '@fluentui/react/lib/Styling';
-export const getStyles = (props: IArcProps): IArcStyles => {
+import { DefaultPalette, ITheme } from '@fluentui/react/lib/Styling';
+export const getStyles = (props: IArcProps, theme: ITheme | undefined): IArcStyles => {
   const { color } = props;
   return {
-    root: { fill: color, stroke: DefaultPalette.white, strokeWidth: 2 },
+    arcRoot: { fill: color },
+    arcRootFocussed: { fill: color, stroke: theme?.palette.black || DefaultPalette.black, strokeWidth: 2 },
+    arc: { outline: 'none' },
+    arcText: { fill: theme?.palette.black || DefaultPalette.black, outline: 'none' },
   };
 };
diff --git a/packages/react-charting/src/components/PieChart/Arc/Arc.tsx b/packages/react-charting/src/components/PieChart/Arc/Arc.tsx
index 84d216979f829b..0e590743d79225 100644
--- a/packages/react-charting/src/components/PieChart/Arc/Arc.tsx
+++ b/packages/react-charting/src/components/PieChart/Arc/Arc.tsx
@@ -1,46 +1,112 @@
 import * as React from 'react';
 import * as shape from 'd3-shape';
-import { IArcProps, IArcStyles } from './Arc.types';
-import { classNamesFunction } from '@fluentui/react/lib/Utilities';
+import { IArcProps, IArcState, IArcStyles } from './Arc.types';
+import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
 import { getStyles } from './Arc.styles';
-import { convertToLocaleString } from '../../../utilities/utilities';
+import { wrapContent, convertToLocaleString } from '../../../utilities/utilities';
+import { SVGTooltipText } from '../../../utilities/SVGTooltipText';
 
-export class Arc extends React.Component<IArcProps, {}> {
+export class Arc extends React.Component<IArcProps, IArcState> {
   public static defaultProps: Partial<IArcProps> = {
     arc: shape.arc(),
   };
 
-  public state: {} = {};
+  protected _arcId: string;
 
   public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null {
     _updateChart(nextProps);
     return null;
   }
 
+  public constructor(props: IArcProps) {
+    super(props);
+    this.state = {
+      isArcFocused: false,
+    };
+
+    this._arcId = getId('piechart_arc');
+  }
+
   public updateChart = (newProps: IArcProps) => {
     _updateChart(newProps);
   };
 
   public render(): JSX.Element {
-    const { color, arc } = this.props;
+    const { arc } = this.props;
     const getClassNames = classNamesFunction<IArcProps, IArcStyles>();
-    const classNames = getClassNames(getStyles, { color });
-    return <path d={arc(this.props.data)} className={classNames.root} onClick={this.props.data?.data.onClick} />;
+    const classNames = getClassNames(props => getStyles(props, this.props.theme), { ...this.props });
+
+    return (
+      <path
+        d={arc(this.props.data)}
+        className={`${this.state.isArcFocused ? classNames.arcRootFocussed : classNames.arcRoot}`}
+        onClick={this.props.data?.data.onClick}
+      />
+    );
   }
+
+  protected _onFocus = () => {
+    this.setState({ isArcFocused: true });
+  };
+
+  protected _onBlur = () => {
+    this.setState({ isArcFocused: false });
+  };
 }
 
 export class LabeledArc extends Arc {
+  private _isRTL = getRTL();
+
+  public constructor(props: IArcProps) {
+    super(props);
+    this._arcId = getId('piechart_arc');
+  }
+
   public render(): JSX.Element {
-    const { data, arc, culture } = this.props;
-    const [labelX, labelY] = arc.centroid(data);
-    const labelTranslate = `translate(${labelX}, ${labelY})`;
+    const { data, culture } = this.props;
+    const gap = 4;
+    // placing the labels on the outside arc
+    const [labelX, labelY] = shape.arc().centroid({
+      endAngle: data?.endAngle || 0,
+      startAngle: data?.startAngle || 0,
+      padAngle: data?.padAngle,
+      innerRadius: this.props?.outerRadius || 0,
+      outerRadius: this.props?.outerRadius || 0 + gap,
+    });
+
+    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();
+    const classNames = getClassNames(props => getStyles(props, this.props.theme));
+
+    const angle = ((data?.startAngle || 0) + (data?.endAngle || 0)) / 2;
+
+    const content = `${data?.data.x}-${convertToLocaleString(data?.data.y, culture)}`;
 
     return (
-      <g className="arc">
+      <g
+        className={`${classNames.arc} arc`}
+        data-is-focusable={true}
+        id={this._arcId}
+        onFocus={this._onFocus}
+        onBlur={this._onBlur}
+        aria-label={content}
+        role="img"
+      >
         {super.render()}
-        <text transform={labelTranslate} textAnchor="middle">
-          {data!.data!.x}-{convertToLocaleString(data!.data!.y, culture)}
-        </text>
+        <SVGTooltipText
+          content={content}
+          textProps={{
+            x: labelX,
+            y: labelY,
+            dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',
+            textAnchor: (!this._isRTL && angle > Math.PI) || (this._isRTL && angle < Math.PI) ? 'end' : 'start',
+            'aria-label': `${data?.data.x}-${convertToLocaleString(data?.data.y, culture)}`,
+            className: classNames.arcText,
+          }}
+          isTooltipVisibleProp={this.state.isArcFocused}
+          shouldReceiveFocus={false}
+          maxWidth={40}
+          wrapContent={wrapContent}
+        />
       </g>
     );
   }
diff --git a/packages/react-charting/src/components/PieChart/Arc/Arc.types.ts b/packages/react-charting/src/components/PieChart/Arc/Arc.types.ts
index 68dafd822f215c..7064f9e17a45ef 100644
--- a/packages/react-charting/src/components/PieChart/Arc/Arc.types.ts
+++ b/packages/react-charting/src/components/PieChart/Arc/Arc.types.ts
@@ -1,4 +1,4 @@
-import { IStyle } from '@fluentui/react/lib/Styling';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IDataPoint } from '../PieChart.types';
 
 export interface IArcProps {
@@ -30,6 +30,17 @@ export interface IArcProps {
    * The prop used to define the culture to localized the numbers
    */
   culture?: string;
+  /**
+   * to pass the theme
+   */
+  theme?: ITheme;
+}
+
+export interface IArcState {
+  /**
+   * The state controls, whether the arc needs to be focused or not
+   */
+  isArcFocused?: boolean;
 }
 
 export interface IArcData {
@@ -63,5 +74,11 @@ export interface IArcStyles {
   /**
    * Style set for the card header component root
    */
-  root: IStyle;
+  arcRoot: IStyle;
+
+  arc: IStyle;
+
+  arcRootFocussed: IStyle;
+
+  arcText: IStyle;
 }
diff --git a/packages/react-charting/src/components/PieChart/Pie/Pie.tsx b/packages/react-charting/src/components/PieChart/Pie/Pie.tsx
index 722464fe38a465..3f694880a24a5e 100644
--- a/packages/react-charting/src/components/PieChart/Pie/Pie.tsx
+++ b/packages/react-charting/src/components/PieChart/Pie/Pie.tsx
@@ -4,11 +4,14 @@ import * as scale from 'd3-scale';
 import { IPieProps } from './Pie.types';
 import { LabeledArc } from '../Arc/Arc';
 import { IArcData } from '../Arc/Arc.types';
+import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
+import { getColorFromToken, getNextColor } from '../../../utilities/colors';
 
 export class Pie extends React.Component<IPieProps, {}> {
   public static defaultProps: Partial<IPieProps> = {
     pie: shape
       .pie()
+      .padAngle(0.01)
       .sort(null)
       /* eslint-disable @typescript-eslint/no-explicit-any */
       .value((d: any) => d.y),
@@ -28,23 +31,36 @@ export class Pie extends React.Component<IPieProps, {}> {
         innerRadius={this.props.innerRadius}
         outerRadius={this.props.outerRadius}
         color={`${this.colors(i)}`}
+        theme={this.props.theme}
       />
     );
   };
 
   public render(): JSX.Element {
     // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();
-    const { pie, colors, data, width, height, chartTitle } = this.props;
+    const { pie, data, width, height, chartTitle, theme } = this.props;
 
-    this.colors = scale.scaleOrdinal().range(colors!);
+    const defaultColors: Array<string> = [];
+    if (data && !this.props.colors) {
+      for (let i = 0; i < data.length; i++) {
+        defaultColors.push(getNextColor(i, 0, theme?.isInverted));
+      }
+    }
+    const { colors = defaultColors } = this.props;
+
+    this.colors = scale.scaleOrdinal().range(colors.map(color => getColorFromToken(color)));
 
     const piechart = pie(data);
     const translate = `translate(${width / 2}, ${height / 2})`;
 
     return (
-      <svg width={width} height={height} aria-label={chartTitle}>
-        <g transform={translate}>{piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i))}</g>
-      </svg>
+      <FocusZone direction={FocusZoneDirection.domOrder}>
+        <svg width={width} height={height} aria-label={chartTitle}>
+          <g className="pie" transform={translate}>
+            {piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i))}
+          </g>
+        </svg>
+      </FocusZone>
     );
   }
 }
diff --git a/packages/react-charting/src/components/PieChart/Pie/Pie.types.ts b/packages/react-charting/src/components/PieChart/Pie/Pie.types.ts
index 4a6ca1140cfbdb..e71a3fec1ec5d0 100644
--- a/packages/react-charting/src/components/PieChart/Pie/Pie.types.ts
+++ b/packages/react-charting/src/components/PieChart/Pie/Pie.types.ts
@@ -1,4 +1,4 @@
-import { IStyle } from '@fluentui/react/lib/Styling';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IDataPoint } from '../PieChart.types';
 
 export interface IPieProps {
@@ -40,6 +40,8 @@ export interface IPieProps {
    * The prop used to define the culture to localized the numbers
    */
   culture?: string;
+
+  theme?: ITheme;
 }
 
 export interface IPieStyles {
diff --git a/packages/react-charting/src/components/PieChart/PieChart.base.tsx b/packages/react-charting/src/components/PieChart/PieChart.base.tsx
index da671491182bd7..74ead8471f7294 100644
--- a/packages/react-charting/src/components/PieChart/PieChart.base.tsx
+++ b/packages/react-charting/src/components/PieChart/PieChart.base.tsx
@@ -30,8 +30,17 @@ export class PieChartBase extends React.Component<IPieChartProps, {}> {
       height: height!,
       className,
     });
-    const radius = Math.min(width!, height!) / 2;
-    const outerRadius = radius - 10;
+
+    const TEXT_MAX_WIDTH = 40;
+    const TEXT_LINE_HEIGHT = 16;
+
+    /**
+     * The radius for the pie chart is computed based on the space available inside the svg
+     * after subtracting the max amount of space that can be used by the text in pie chart
+     */
+
+    const radius = Math.min(width! - 2 * TEXT_MAX_WIDTH, height! - 2 * TEXT_LINE_HEIGHT) / 2;
+    const outerRadius = radius;
 
     return !this._isChartEmpty() ? (
       <div className={this._classNames.root}>
@@ -41,10 +50,11 @@ export class PieChartBase extends React.Component<IPieChartProps, {}> {
           width={width!}
           height={height!}
           outerRadius={outerRadius}
-          innerRadius={0}
+          innerRadius={1}
           data={data!}
           colors={colors!}
           chartTitle={chartTitle!}
+          theme={theme}
         />
       </div>
     ) : (
diff --git a/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx b/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx
index 3d5cd25ebe576e..368b785f66405e 100644
--- a/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx
+++ b/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
 import { PieChart } from './index';
 import { chartPoints, colors } from './PieChart.test';
+import * as utils from '../../utilities/utilities';
 
 describe('Pie chart rendering', () => {
   test('Should re-render the Pie chart with data', async () => {
@@ -11,6 +12,11 @@ describe('Pie chart rendering', () => {
     // Assert
     expect(container).toMatchSnapshot();
     expect(getById(container, /_PieChart_empty/i)).toHaveLength(1);
+
+    // Mock the implementation of wrapContent as it internally calls a Browser Function like
+    // getComputedTextLength() which will otherwise lead to a crash if mounted
+    jest.spyOn(utils, 'wrapContent').mockImplementation(() => false);
+
     // Act
     rerender(<PieChart data={chartPoints} colors={colors} />);
     await waitFor(() => {
diff --git a/packages/react-charting/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap b/packages/react-charting/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap
index 4ff4835af55382..ae261f4d917a9f 100644
--- a/packages/react-charting/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap
+++ b/packages/react-charting/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap
@@ -13,81 +13,160 @@ exports[`PieChart snapShot testing renders PieChart correctly 1`] = `
         width: 670px;
       }
 >
-  <svg
-    height={350}
-    width={600}
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone1"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
   >
-    <g
-      transform="translate(300, 175)"
+    <svg
+      height={350}
+      width={600}
     >
       <g
-        className="arc"
+        className="pie"
+        transform="translate(300, 175)"
       >
-        <path
+        <g
+          aria-label="A-50"
           className=
-
+              arc
               {
-                fill: #e81123;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M0,-165A165,165,0,1,1,0,165L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(82.5, 1.8318679906315083e-14)"
+          data-is-focusable={true}
+          id="piechart_arc3"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          A
-          -
-          50
-        </text>
-      </g>
-      <g
-        className="arc"
-      >
-        <path
-          className=
+          <path
+            className=
+
+                {
+                  fill: #e81123;
+                }
+            d="M0.795,-158.998A159,159,0,0,1,1.59,158.992L0.798,0.603A1,1,0,0,0,0.795,-0.607Z"
+          />
+          <text
+            aria-label="A-50"
+            className=
 
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="auto"
+            id="tooltip-host4"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="start"
+            x={158.9995031252588}
+            y={-0.3974995859376562}
+          >
+            A-50
+          </text>
+        </g>
+        <g
+          aria-label="B-25"
+          className=
+              arc
               {
-                fill: #0078d4;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M0,165A165,165,0,0,1,-165,0L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(-58.33630944789022, 58.33630944789013)"
+          data-is-focusable={true}
+          id="piechart_arc6"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          B
-          -
-          25
-        </text>
-      </g>
-      <g
-        className="arc"
-      >
-        <path
-          className=
+          <path
+            className=
+
+                {
+                  fill: #0078d4;
+                }
+            d="M0,159A159,159,0,0,1,-158.996,1.193L-0.704,0.71Z"
+          />
+          <text
+            aria-label="B-25"
+            className=
 
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="hanging"
+            id="tooltip-host7"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="end"
+            x={-112.00757625617408}
+            y={112.85079911643227}
+          >
+            B-25
+          </text>
+        </g>
+        <g
+          aria-label="C-25"
+          className=
+              arc
               {
-                fill: #107c10;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M-165,0A165,165,0,0,1,0,-165L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(-58.33630944789013, -58.33630944789022)"
+          data-is-focusable={true}
+          id="piechart_arc9"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          C
-          -
-          25
-        </text>
+          <path
+            className=
+
+                {
+                  fill: #107c10;
+                }
+            d="M-159,-0.398A159,159,0,0,1,-0.795,-158.998L-0.708,-0.706Z"
+          />
+          <text
+            aria-label="C-25"
+            className=
+
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="auto"
+            id="tooltip-host10"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="end"
+            x={-112.57042780891464}
+            y={-112.2893529365894}
+          >
+            C-25
+          </text>
+        </g>
       </g>
-    </g>
-  </svg>
+    </svg>
+  </div>
 </div>
 `;
 
@@ -104,80 +183,159 @@ exports[`PieChart snapShot testing renders with colors, width and height data co
         width: 670px;
       }
 >
-  <svg
-    height={300}
-    width={600}
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone12"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
   >
-    <g
-      transform="translate(300, 150)"
+    <svg
+      height={300}
+      width={600}
     >
       <g
-        className="arc"
+        className="pie"
+        transform="translate(300, 150)"
       >
-        <path
+        <g
+          aria-label="A-50"
           className=
-
+              arc
               {
-                fill: #e81123;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M0,-140A140,140,0,1,1,0,140L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(70, 1.554312234475219e-14)"
+          data-is-focusable={true}
+          id="piechart_arc14"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          A
-          -
-          50
-        </text>
-      </g>
-      <g
-        className="arc"
-      >
-        <path
-          className=
+          <path
+            className=
+
+                {
+                  fill: #e81123;
+                }
+            d="M0.67,-133.998A134,134,0,0,1,1.34,133.993L0.674,0.739A1,1,0,0,0,0.67,-0.742Z"
+          />
+          <text
+            aria-label="A-50"
+            className=
 
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="auto"
+            id="tooltip-host15"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="start"
+            x={133.99958125021809}
+            y={-0.3349996510417983}
+          >
+            A-50
+          </text>
+        </g>
+        <g
+          aria-label="B-25"
+          className=
+              arc
               {
-                fill: #0078d4;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M0,140A140,140,0,0,1,-140,0L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(-49.49747468305837, 49.49747468305829)"
+          data-is-focusable={true}
+          id="piechart_arc17"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          B
-          -
-          25
-        </text>
-      </g>
-      <g
-        className="arc"
-      >
-        <path
-          className=
+          <path
+            className=
+
+                {
+                  fill: #0078d4;
+                }
+            d="M0,134A134,134,0,0,1,-133.996,1.005L-0.741,0.672A1,1,0,0,0,-0.666,0.746Z"
+          />
+          <text
+            aria-label="B-25"
+            className=
 
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="hanging"
+            id="tooltip-host18"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="end"
+            x={-94.39632212784481}
+            y={95.1069627773706}
+          >
+            B-25
+          </text>
+        </g>
+        <g
+          aria-label="C-25"
+          className=
+              arc
               {
-                fill: #107c10;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M-140,0A140,140,0,0,1,0,-140L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(-49.49747468305829, -49.49747468305837)"
+          data-is-focusable={true}
+          id="piechart_arc20"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          C
-          -
-          25
-        </text>
+          <path
+            className=
+
+                {
+                  fill: #107c10;
+                }
+            d="M-134,-0.335A134,134,0,0,1,-0.67,-133.998L-0.67,-0.742A1,1,0,0,0,-0.744,-0.668Z"
+          />
+          <text
+            aria-label="C-25"
+            className=
+
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="auto"
+            id="tooltip-host21"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="end"
+            x={-94.87067500877083}
+            y={-94.63379429876088}
+          >
+            C-25
+          </text>
+        </g>
       </g>
-    </g>
-  </svg>
+    </svg>
+  </div>
 </div>
 `;
diff --git a/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap b/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap
index e730fc97eced35..70492e99956e88 100644
--- a/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Pie chart rendering Should re-render the Pie chart with data 1`] = `
 <div>
   <div
     aria-label="Graph has no data to display"
-    id="_PieChart_empty5"
+    id="_PieChart_empty45"
     role="alert"
     style="opacity: 0;"
   />
@@ -26,81 +26,143 @@ exports[`Pie chart rendering Should re-render the Pie chart with data 2`] = `
         }
     style=""
   >
-    <svg
-      height="350"
-      width="600"
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+      data-focuszone-id="FocusZone46"
     >
-      <g
-        transform="translate(300, 175)"
+      <svg
+        focusable="false"
+        height="350"
+        width="600"
       >
         <g
-          class="arc"
+          class="pie"
+          transform="translate(300, 175)"
         >
-          <path
+          <g
+            aria-label="A-50"
             class=
-
+                arc
                 {
-                  fill: #e81123;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
+                  outline: none;
                 }
-            d="M0,-165A165,165,0,1,1,0,165L0,0Z"
-          />
-          <text
-            text-anchor="middle"
-            transform="translate(82.5, 1.8318679906315083e-14)"
+            data-is-focusable="true"
+            id="piechart_arc48"
+            role="img"
+            tabindex="0"
           >
-            A
-            -
-            50
-          </text>
-        </g>
-        <g
-          class="arc"
-        >
-          <path
-            class=
+            <path
+              class=
+
+                  {
+                    fill: #e81123;
+                  }
+              d="M0.795,-158.998A159,159,0,0,1,1.59,158.992L0.798,0.603A1,1,0,0,0,0.795,-0.607Z"
+            />
+            <text
+              aria-label="A-50"
+              class=
 
+                  {
+                    fill: #000000;
+                    outline: none;
+                  }
+              data-is-focusable="false"
+              dominant-baseline="auto"
+              id="tooltip-host49"
+              tabindex="-1"
+              text-anchor="start"
+              x="158.9995031252588"
+              y="-0.3974995859376562"
+            >
+              A-50
+            </text>
+          </g>
+          <g
+            aria-label="B-25"
+            class=
+                arc
                 {
-                  fill: #0078d4;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
+                  outline: none;
                 }
-            d="M0,165A165,165,0,0,1,-165,0L0,0Z"
-          />
-          <text
-            text-anchor="middle"
-            transform="translate(-58.33630944789022, 58.33630944789013)"
+            data-is-focusable="true"
+            id="piechart_arc51"
+            role="img"
+            tabindex="-1"
           >
-            B
-            -
-            25
-          </text>
-        </g>
-        <g
-          class="arc"
-        >
-          <path
-            class=
+            <path
+              class=
+
+                  {
+                    fill: #0078d4;
+                  }
+              d="M0,159A159,159,0,0,1,-158.996,1.193L-0.704,0.71Z"
+            />
+            <text
+              aria-label="B-25"
+              class=
 
+                  {
+                    fill: #000000;
+                    outline: none;
+                  }
+              data-is-focusable="false"
+              dominant-baseline="hanging"
+              id="tooltip-host52"
+              tabindex="-1"
+              text-anchor="end"
+              x="-112.00757625617408"
+              y="112.85079911643227"
+            >
+              B-25
+            </text>
+          </g>
+          <g
+            aria-label="C-25"
+            class=
+                arc
                 {
-                  fill: #107c10;
-                  stroke-width: 2px;
-                  stroke: #ffffff;
+                  outline: none;
                 }
-            d="M-165,0A165,165,0,0,1,0,-165L0,0Z"
-          />
-          <text
-            text-anchor="middle"
-            transform="translate(-58.33630944789013, -58.33630944789022)"
+            data-is-focusable="true"
+            id="piechart_arc54"
+            role="img"
+            tabindex="-1"
           >
-            C
-            -
-            25
-          </text>
+            <path
+              class=
+
+                  {
+                    fill: #107c10;
+                  }
+              d="M-159,-0.398A159,159,0,0,1,-0.795,-158.998L-0.708,-0.706Z"
+            />
+            <text
+              aria-label="C-25"
+              class=
+
+                  {
+                    fill: #000000;
+                    outline: none;
+                  }
+              data-is-focusable="false"
+              dominant-baseline="auto"
+              id="tooltip-host55"
+              tabindex="-1"
+              text-anchor="end"
+              x="-112.57042780891464"
+              y="-112.2893529365894"
+            >
+              C-25
+            </text>
+          </g>
         </g>
-      </g>
-    </svg>
+      </svg>
+    </div>
   </div>
 </div>
 `;
@@ -118,81 +180,160 @@ exports[`PieChart snapShot testing renders PieChart correctly 1`] = `
         width: 670px;
       }
 >
-  <svg
-    height={350}
-    width={600}
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone1"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
   >
-    <g
-      transform="translate(300, 175)"
+    <svg
+      height={350}
+      width={600}
     >
       <g
-        className="arc"
+        className="pie"
+        transform="translate(300, 175)"
       >
-        <path
+        <g
+          aria-label="A-50"
           className=
-
+              arc
               {
-                fill: #e81123;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M0,-165A165,165,0,1,1,0,165L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(82.5, 1.8318679906315083e-14)"
+          data-is-focusable={true}
+          id="piechart_arc3"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          A
-          -
-          50
-        </text>
-      </g>
-      <g
-        className="arc"
-      >
-        <path
-          className=
+          <path
+            className=
 
+                {
+                  fill: #e81123;
+                }
+            d="M0.795,-158.998A159,159,0,0,1,1.59,158.992L0.798,0.603A1,1,0,0,0,0.795,-0.607Z"
+          />
+          <text
+            aria-label="A-50"
+            className=
+
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="auto"
+            id="tooltip-host4"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="start"
+            x={158.9995031252588}
+            y={-0.3974995859376562}
+          >
+            A-50
+          </text>
+        </g>
+        <g
+          aria-label="B-25"
+          className=
+              arc
               {
-                fill: #0078d4;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M0,165A165,165,0,0,1,-165,0L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(-58.33630944789022, 58.33630944789013)"
+          data-is-focusable={true}
+          id="piechart_arc6"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          B
-          -
-          25
-        </text>
-      </g>
-      <g
-        className="arc"
-      >
-        <path
-          className=
+          <path
+            className=
+
+                {
+                  fill: #0078d4;
+                }
+            d="M0,159A159,159,0,0,1,-158.996,1.193L-0.704,0.71Z"
+          />
+          <text
+            aria-label="B-25"
+            className=
 
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="hanging"
+            id="tooltip-host7"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="end"
+            x={-112.00757625617408}
+            y={112.85079911643227}
+          >
+            B-25
+          </text>
+        </g>
+        <g
+          aria-label="C-25"
+          className=
+              arc
               {
-                fill: #107c10;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M-165,0A165,165,0,0,1,0,-165L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(-58.33630944789013, -58.33630944789022)"
+          data-is-focusable={true}
+          id="piechart_arc9"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          C
-          -
-          25
-        </text>
+          <path
+            className=
+
+                {
+                  fill: #107c10;
+                }
+            d="M-159,-0.398A159,159,0,0,1,-0.795,-158.998L-0.708,-0.706Z"
+          />
+          <text
+            aria-label="C-25"
+            className=
+
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="auto"
+            id="tooltip-host10"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="end"
+            x={-112.57042780891464}
+            y={-112.2893529365894}
+          >
+            C-25
+          </text>
+        </g>
       </g>
-    </g>
-  </svg>
+    </svg>
+  </div>
 </div>
 `;
 
@@ -209,80 +350,159 @@ exports[`PieChart snapShot testing renders with colors, width and height data co
         width: 670px;
       }
 >
-  <svg
-    height={300}
-    width={600}
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone12"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
   >
-    <g
-      transform="translate(300, 150)"
+    <svg
+      height={300}
+      width={600}
     >
       <g
-        className="arc"
+        className="pie"
+        transform="translate(300, 150)"
       >
-        <path
+        <g
+          aria-label="A-50"
           className=
-
+              arc
               {
-                fill: #e81123;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M0,-140A140,140,0,1,1,0,140L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(70, 1.554312234475219e-14)"
+          data-is-focusable={true}
+          id="piechart_arc14"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          A
-          -
-          50
-        </text>
-      </g>
-      <g
-        className="arc"
-      >
-        <path
-          className=
+          <path
+            className=
 
+                {
+                  fill: #e81123;
+                }
+            d="M0.67,-133.998A134,134,0,0,1,1.34,133.993L0.674,0.739A1,1,0,0,0,0.67,-0.742Z"
+          />
+          <text
+            aria-label="A-50"
+            className=
+
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="auto"
+            id="tooltip-host15"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="start"
+            x={133.99958125021809}
+            y={-0.3349996510417983}
+          >
+            A-50
+          </text>
+        </g>
+        <g
+          aria-label="B-25"
+          className=
+              arc
               {
-                fill: #0078d4;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M0,140A140,140,0,0,1,-140,0L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(-49.49747468305837, 49.49747468305829)"
+          data-is-focusable={true}
+          id="piechart_arc17"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          B
-          -
-          25
-        </text>
-      </g>
-      <g
-        className="arc"
-      >
-        <path
-          className=
+          <path
+            className=
 
+                {
+                  fill: #0078d4;
+                }
+            d="M0,134A134,134,0,0,1,-133.996,1.005L-0.741,0.672A1,1,0,0,0,-0.666,0.746Z"
+          />
+          <text
+            aria-label="B-25"
+            className=
+
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="hanging"
+            id="tooltip-host18"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="end"
+            x={-94.39632212784481}
+            y={95.1069627773706}
+          >
+            B-25
+          </text>
+        </g>
+        <g
+          aria-label="C-25"
+          className=
+              arc
               {
-                fill: #107c10;
-                stroke-width: 2px;
-                stroke: #ffffff;
+                outline: none;
               }
-          d="M-140,0A140,140,0,0,1,0,-140L0,0Z"
-        />
-        <text
-          textAnchor="middle"
-          transform="translate(-49.49747468305829, -49.49747468305837)"
+          data-is-focusable={true}
+          id="piechart_arc20"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          role="img"
         >
-          C
-          -
-          25
-        </text>
+          <path
+            className=
+
+                {
+                  fill: #107c10;
+                }
+            d="M-134,-0.335A134,134,0,0,1,-0.67,-133.998L-0.67,-0.742A1,1,0,0,0,-0.744,-0.668Z"
+          />
+          <text
+            aria-label="C-25"
+            className=
+
+                {
+                  fill: #000000;
+                  outline: none;
+                }
+            data-is-focusable={false}
+            dominantBaseline="auto"
+            id="tooltip-host21"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            textAnchor="end"
+            x={-94.87067500877083}
+            y={-94.63379429876088}
+          >
+            C-25
+          </text>
+        </g>
       </g>
-    </g>
-  </svg>
+    </svg>
+  </div>
 </div>
 `;
diff --git a/packages/react-charting/src/utilities/SVGTooltipText.tsx b/packages/react-charting/src/utilities/SVGTooltipText.tsx
index 463ead3dfc257b..eb625317a5465b 100644
--- a/packages/react-charting/src/utilities/SVGTooltipText.tsx
+++ b/packages/react-charting/src/utilities/SVGTooltipText.tsx
@@ -41,6 +41,22 @@ interface ISVGTooltipTextProps {
    */
   maxHeight?: number;
 
+  /**
+   * Pass false to make prevent the tooptip from receiving focus through keyboard
+   * Eg: In Pie Chart, the focus should only land on the arcs and not on the text to
+   * avoid repitition of the same datapoint
+   * @defaultvalue true
+   */
+  shouldReceiveFocus?: boolean;
+
+  /**
+   * Pass true to show tooltip directly
+   * Eg: In Pie Chart, the tooltip is shown when the arc is focussed, so the prop is set to true,
+   * to directly show the tooltip from this component
+   * @defaultvalue false
+   */
+  isTooltipVisibleProp?: boolean;
+
   /**
    * Function to wrap text within specified width and height
    * and return a boolean value indicating whether the text overflowed
@@ -88,7 +104,7 @@ export class SVGTooltipText
   }
 
   public render(): React.ReactNode {
-    const { content, tooltipProps, textProps } = this.props;
+    const { content, tooltipProps, textProps, shouldReceiveFocus = true } = this.props;
     const { isTooltipVisible } = this.state;
     const tooltipRenderProps: ITooltipProps = {
       content,
@@ -103,7 +119,8 @@ export class SVGTooltipText
       ...tooltipProps,
     };
 
-    const showTooltip = isTooltipVisible && !!content;
+    const showTooltip =
+      (!!this.props.isTooltipVisibleProp && this.state.isOverflowing && !!content) || (isTooltipVisible && !!content);
 
     return (
       <>
@@ -116,7 +133,7 @@ export class SVGTooltipText
           onMouseEnter={this._onTooltipMouseEnter}
           onMouseLeave={this._onTooltipMouseLeave}
           onKeyDown={this._onTooltipKeyDown}
-          data-is-focusable={this.state.isOverflowing}
+          data-is-focusable={shouldReceiveFocus && this.state.isOverflowing}
         >
           {content}
         </text>
diff --git a/packages/react-examples/src/react-charting/PieChart/PieChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/PieChart/PieChart.Basic.Example.tsx
index 9aa1661cbfda8d..0499be1fc2b45e 100644
--- a/packages/react-examples/src/react-charting/PieChart/PieChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/PieChart/PieChart.Basic.Example.tsx
@@ -1,26 +1,65 @@
 import * as React from 'react';
 import { PieChart, IPieChartProps } from '@fluentui/react-charting';
-import { DefaultPalette } from '@fluentui/react/lib/Styling';
+import { Stack, StackItem } from '@fluentui/react';
 
-export class PieChartBasicExample extends React.Component<IPieChartProps, {}> {
+export class PieChartBasicExample extends React.Component<IPieChartProps, { width: number; height: number }> {
   constructor(props: IPieChartProps) {
     super(props);
+    this.state = {
+      height: 350,
+      width: 600,
+    };
   }
 
   public render(): JSX.Element {
     const points = [
-      { y: 50, x: 'A' },
-      { y: 25, x: 'B' },
-      { y: 25, x: 'C' },
+      { y: 50, x: 'ABCD' },
+      { y: 25, x: 'EFGH' },
+      { y: 25, x: 'IJKL' },
     ];
-    const colors = [DefaultPalette.red, DefaultPalette.blue, DefaultPalette.green];
     return (
-      <PieChart
-        culture={window.navigator.language}
-        data={points}
-        chartTitle="Pie Chart basic example"
-        colors={colors}
-      />
+      <React.Fragment>
+        <Stack horizontal wrap tokens={{ childrenGap: 20 }}>
+          <StackItem>
+            <label htmlFor="width-slider">Width:</label>
+            <input
+              type="range"
+              value={this.state.width}
+              min={0}
+              max={1000}
+              id="width-slider"
+              onChange={this._onWidthChange}
+              aria-valuetext={`Width: ${this.state.width}`}
+            />
+          </StackItem>
+          <StackItem>
+            <label htmlFor="height-slider">Height:</label>
+            <input
+              type="range"
+              value={this.state.height}
+              min={0}
+              max={1000}
+              id="height-slider"
+              onChange={this._onHeightChange}
+              aria-valuetext={`height: ${this.state.height}`}
+            />
+          </StackItem>
+        </Stack>
+        <PieChart
+          width={this.state.width}
+          height={this.state.height}
+          culture={window.navigator.language}
+          data={points}
+          chartTitle="Pie Chart basic example"
+        />
+      </React.Fragment>
     );
   }
+
+  private _onWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ width: parseInt(e.target.value, 10) });
+  };
+  private _onHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ height: parseInt(e.target.value, 10) });
+  };
 }
diff --git a/packages/react-examples/src/react-charting/PieChart/PieChart.Dynamic.Example.tsx b/packages/react-examples/src/react-charting/PieChart/PieChart.Dynamic.Example.tsx
index 1514361e474d55..d79b767c6eef86 100644
--- a/packages/react-examples/src/react-charting/PieChart/PieChart.Dynamic.Example.tsx
+++ b/packages/react-examples/src/react-charting/PieChart/PieChart.Dynamic.Example.tsx
@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { IDataPoint, PieChart, IPieChartProps } from '@fluentui/react-charting';
-import { DefaultPalette } from '@fluentui/react/lib/Styling';
+import { IDataPoint, PieChart, IPieChartProps, DataVizPalette } from '@fluentui/react-charting';
 import { DefaultButton } from '@fluentui/react/lib/Button';
+import { Stack, StackItem } from '@fluentui/react';
 
 export interface IExampleState {
   dynamicData: IDataPoint[];
   colors: string[];
+  width: number;
+  height: number;
 }
 
 export class PieChartDynamicExample extends React.Component<IPieChartProps, IExampleState> {
   private _colors = [
-    [
-      DefaultPalette.blueLight,
-      DefaultPalette.blue,
-      DefaultPalette.tealLight,
-      DefaultPalette.teal,
-      DefaultPalette.greenLight,
-    ],
-    [DefaultPalette.purpleLight, DefaultPalette.purple, DefaultPalette.magentaLight, DefaultPalette.magenta],
-    [DefaultPalette.yellowLight, DefaultPalette.yellow, DefaultPalette.orangeLighter, DefaultPalette.orangeLight],
-    [DefaultPalette.neutralLight, DefaultPalette.neutralQuaternary, DefaultPalette.neutralTertiary],
+    [DataVizPalette.color1, DataVizPalette.color2, DataVizPalette.color3, DataVizPalette.color4, DataVizPalette.color5],
+    [DataVizPalette.color6, DataVizPalette.color7, DataVizPalette.color8, DataVizPalette.color9],
+    [DataVizPalette.color10, DataVizPalette.color11, DataVizPalette.color12, DataVizPalette.color13],
+    [DataVizPalette.color30],
   ];
 
   constructor(props: IPieChartProps) {
@@ -31,12 +27,9 @@ export class PieChartDynamicExample extends React.Component<IPieChartProps, IExa
         { x: 'C', y: 60 },
         { x: 'D', y: 5 },
       ],
-      colors: [
-        DefaultPalette.blueLight,
-        DefaultPalette.purpleLight,
-        DefaultPalette.yellowLight,
-        DefaultPalette.neutralLight,
-      ],
+      colors: this._colors[0],
+      width: 600,
+      height: 350,
     };
 
     this._changeData = this._changeData.bind(this);
@@ -46,7 +39,39 @@ export class PieChartDynamicExample extends React.Component<IPieChartProps, IExa
   public render(): JSX.Element {
     return (
       <div>
-        <PieChart data={this.state.dynamicData} chartTitle="Pie Chart dynamic example" colors={this.state.colors} />
+        <Stack horizontal wrap tokens={{ childrenGap: 20 }}>
+          <StackItem>
+            <label htmlFor="width-slider">Width:</label>
+            <input
+              type="range"
+              value={this.state.width}
+              min={0}
+              max={1000}
+              id="width-slider"
+              onChange={this._onWidthChange}
+              aria-valuetext={`Width: ${this.state.width}`}
+            />
+          </StackItem>
+          <StackItem>
+            <label htmlFor="height-slider">Height:</label>
+            <input
+              type="range"
+              value={this.state.height}
+              min={0}
+              max={1000}
+              id="height-slider"
+              onChange={this._onHeightChange}
+              aria-valuetext={`height: ${this.state.height}`}
+            />
+          </StackItem>
+        </Stack>
+        <PieChart
+          width={this.state.width}
+          height={this.state.height}
+          data={this.state.dynamicData}
+          chartTitle="Pie Chart dynamic example"
+          colors={this.state.colors}
+        />
         <DefaultButton text="Change data" onClick={this._changeData} />
         <DefaultButton text="Change colors" onClick={this._changeColors} />
       </div>
@@ -82,4 +107,11 @@ export class PieChartDynamicExample extends React.Component<IPieChartProps, IExa
   private _randomColor(index: number): string {
     return this._colors[index][Math.floor(Math.random() * this._colors[index].length)];
   }
+
+  private _onWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ width: parseInt(e.target.value, 10) });
+  };
+  private _onHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ height: parseInt(e.target.value, 10) });
+  };
 }