diff --git a/change/@fluentui-react-charting-39bea296-8396-427f-9f9e-f0f0bc1d627a.json b/change/@fluentui-react-charting-39bea296-8396-427f-9f9e-f0f0bc1d627a.json
new file mode 100644
index 00000000000000..79bc831e690122
--- /dev/null
+++ b/change/@fluentui-react-charting-39bea296-8396-427f-9f9e-f0f0bc1d627a.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Adding axis title examples for line, area, vertical bar and vertical stacked bar charts",
+  "packageName": "@fluentui/react-charting",
+  "email": "srmukher@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
index c615c40921e747..47bfe5bfc6e7a6 100644
--- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
@@ -2,11 +2,13 @@ import * as React from 'react';
 import { AreaChart, ICustomizedCalloutData } from '@fluentui/react-charting';
 import { IAreaChartProps, ChartHoverCard } from '@fluentui/react-charting';
 import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup';
+import { Toggle } from '@fluentui/react/lib/Toggle';
 
 interface IAreaChartBasicState {
   width: number;
   height: number;
   isCalloutselected: boolean;
+  showAxisTitles: boolean;
 }
 
 const options: IChoiceGroupOption[] = [
@@ -21,6 +23,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
       width: 700,
       height: 300,
       isCalloutselected: false,
+      showAxisTitles: true,
     };
   }
 
@@ -43,6 +46,11 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
     }
   };
 
+  private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
+    this.forceUpdate();
+    this.setState({ showAxisTitles: checked });
+  };
+
   private _basicExample(): JSX.Element {
     const chart1Points = [
       {
@@ -176,28 +184,64 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
         />
 
         <ChoiceGroup options={options} defaultSelectedKey="basicExample" onChange={this._onChange} label="Pick one" />
-        <div style={rootStyle}>
-          <AreaChart
-            culture={window.navigator.language}
-            height={this.state.height}
-            width={this.state.width}
-            data={chartData}
-            showYAxisGridLines={true}
-            enablePerfOptimization={true}
-            // eslint-disable-next-line react/jsx-no-bind
-            onRenderCalloutPerDataPoint={(props: ICustomizedCalloutData) =>
-              props && this.state.isCalloutselected ? (
-                <ChartHoverCard
-                  XValue={props.x.toString()}
-                  Legend={'Custom Legend'}
-                  YValue={`${props.values[0].yAxisCalloutData || props.values[0].y} h`}
-                  color={'red'}
-                />
-              ) : null
-            }
-            enableReflow={true}
-          />
-        </div>
+        <Toggle
+          label="Toggle Axis titles"
+          onText="Show axis titles"
+          offText="Hide axis titles"
+          checked={this.state.showAxisTitles}
+          onChange={this._onToggleAxisTitlesCheckChange}
+          styles={{ root: { marginTop: '10px' } }}
+        />
+        {this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <AreaChart
+              culture={window.navigator.language}
+              height={this.state.height}
+              width={this.state.width}
+              data={chartData}
+              showYAxisGridLines={true}
+              enablePerfOptimization={true}
+              // eslint-disable-next-line react/jsx-no-bind
+              onRenderCalloutPerDataPoint={(props: ICustomizedCalloutData) =>
+                props && this.state.isCalloutselected ? (
+                  <ChartHoverCard
+                    XValue={props.x.toString()}
+                    Legend={'Custom Legend'}
+                    YValue={`${props.values[0].yAxisCalloutData || props.values[0].y} h`}
+                    color={'red'}
+                  />
+                ) : null
+              }
+              enableReflow={true}
+              yAxisTitle={this.state.showAxisTitles ? 'Variation of stock market prices' : undefined}
+              xAxisTitle={this.state.showAxisTitles ? 'Number of days' : undefined}
+            />
+          </div>
+        )}
+        {!this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <AreaChart
+              culture={window.navigator.language}
+              height={this.state.height}
+              width={this.state.width}
+              data={chartData}
+              showYAxisGridLines={true}
+              enablePerfOptimization={true}
+              // eslint-disable-next-line react/jsx-no-bind
+              onRenderCalloutPerDataPoint={(props: ICustomizedCalloutData) =>
+                props && this.state.isCalloutselected ? (
+                  <ChartHoverCard
+                    XValue={props.x.toString()}
+                    Legend={'Custom Legend'}
+                    YValue={`${props.values[0].yAxisCalloutData || props.values[0].y} h`}
+                    color={'red'}
+                  />
+                ) : null
+              }
+              enableReflow={true}
+            />
+          </div>
+        )}
       </>
     );
   }
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
index 32f2706cbed8cb..ba91d059fdc97c 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
@@ -7,6 +7,7 @@ interface ILineChartBasicState {
   width: number;
   height: number;
   allowMultipleShapes: boolean;
+  showAxisTitles: boolean;
 }
 
 export class LineChartBasicExample extends React.Component<{}, ILineChartBasicState> {
@@ -16,6 +17,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
       width: 700,
       height: 300,
       allowMultipleShapes: false,
+      showAxisTitles: true,
     };
   }
 
@@ -32,6 +34,10 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
   private _onShapeChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
     this.setState({ allowMultipleShapes: checked });
   };
+  private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
+    this.forceUpdate();
+    this.setState({ showAxisTitles: checked });
+  };
 
   private _basicExample(): JSX.Element {
     const data: IChartProps = {
@@ -143,7 +149,6 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
     };
 
     const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
-    const margins = { left: 35, top: 20, bottom: 35, right: 20 };
 
     return (
       <>
@@ -174,21 +179,48 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
           onChange={this._onShapeChange}
           checked={this.state.allowMultipleShapes}
         />
-        <div style={rootStyle}>
-          <LineChart
-            culture={window.navigator.language}
-            data={data}
-            legendsOverflowText={'Overflow Items'}
-            yMinValue={200}
-            yMaxValue={301}
-            height={this.state.height}
-            width={this.state.width}
-            margins={margins}
-            xAxisTickCount={10}
-            allowMultipleShapesForPoints={this.state.allowMultipleShapes}
-            enablePerfOptimization={true}
-          />
-        </div>
+        <Toggle
+          label="Toggle Axis titles"
+          onText="Show axis titles"
+          offText="Hide axis titles"
+          checked={this.state.showAxisTitles}
+          onChange={this._onToggleAxisTitlesCheckChange}
+          styles={{ root: { marginTop: '10px' } }}
+        />
+        {this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <LineChart
+              culture={window.navigator.language}
+              data={data}
+              legendsOverflowText={'Overflow Items'}
+              yMinValue={200}
+              yMaxValue={301}
+              height={this.state.height}
+              width={this.state.width}
+              xAxisTickCount={10}
+              allowMultipleShapesForPoints={this.state.allowMultipleShapes}
+              enablePerfOptimization={true}
+              yAxisTitle={this.state.showAxisTitles ? 'Different categories of mail flow' : undefined}
+              xAxisTitle={this.state.showAxisTitles ? 'Values of each category' : undefined}
+            />
+          </div>
+        )}
+        {!this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <LineChart
+              culture={window.navigator.language}
+              data={data}
+              legendsOverflowText={'Overflow Items'}
+              yMinValue={200}
+              yMaxValue={301}
+              height={this.state.height}
+              width={this.state.width}
+              xAxisTickCount={10}
+              allowMultipleShapesForPoints={this.state.allowMultipleShapes}
+              enablePerfOptimization={true}
+            />
+          </div>
+        )}
       </>
     );
   }
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx
deleted file mode 100644
index e237efdf19fb42..00000000000000
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import * as React from 'react';
-import {
-  VerticalBarChart,
-  IVerticalBarChartProps,
-  IVerticalBarChartDataPoint,
-  ILineChartLineOptions,
-} from '@fluentui/react-charting';
-import { DefaultPalette } from '@fluentui/react/lib/Styling';
-import { IRenderFunction } from '@fluentui/react/lib/Utilities';
-import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup';
-import { Checkbox } from '@fluentui/react/lib/Checkbox';
-
-interface IVerticalChartState {
-  width: number;
-  height: number;
-  isCalloutselected: boolean;
-  useSingleColor: boolean;
-  hideLabels: boolean;
-}
-
-const options: IChoiceGroupOption[] = [
-  { key: 'basicExample', text: 'Basic Example' },
-  { key: 'calloutExample', text: 'Custom Callout Example' },
-];
-
-export class VerticalBarChartAxisTitleExample extends React.Component<IVerticalBarChartProps, IVerticalChartState> {
-  constructor(props: IVerticalBarChartProps) {
-    super(props);
-    this.state = {
-      width: 650,
-      height: 350,
-      isCalloutselected: false,
-      useSingleColor: false,
-      hideLabels: false,
-    };
-  }
-
-  public render(): JSX.Element {
-    return <div>{this._basicExample()}</div>;
-  }
-
-  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) });
-  };
-
-  private _onChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
-    if (this.state.isCalloutselected) {
-      this.setState({ isCalloutselected: false });
-    } else {
-      this.setState({ isCalloutselected: true });
-    }
-  };
-  private _onCheckChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
-    this.setState({ useSingleColor: checked });
-  };
-  private _onHideLabelsCheckChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
-    this.setState({ hideLabels: checked });
-  };
-
-  private _basicExample(): JSX.Element {
-    const points: IVerticalBarChartDataPoint[] = [
-      {
-        x: 0,
-        y: 10000,
-        legend: 'Oranges',
-        color: DefaultPalette.accent,
-        xAxisCalloutData: '2020/04/30',
-        yAxisCalloutData: '10%',
-        lineData: {
-          y: 7000,
-          yAxisCalloutData: '34%',
-        },
-      },
-      {
-        x: 10000,
-        y: 50000,
-        legend: 'Dogs',
-        color: DefaultPalette.blueDark,
-        xAxisCalloutData: '2020/04/30',
-        yAxisCalloutData: '20%',
-        lineData: {
-          y: 30000,
-        },
-      },
-      {
-        x: 25000,
-        y: 30000,
-        legend: 'Apples',
-        color: DefaultPalette.blueMid,
-        xAxisCalloutData: '2020/04/30',
-        yAxisCalloutData: '37%',
-        lineData: {
-          y: 3000,
-          yAxisCalloutData: '43%',
-        },
-      },
-
-      {
-        x: 40000,
-        y: 13000,
-        legend: 'Bananas',
-        color: DefaultPalette.blueLight,
-        xAxisCalloutData: '2020/04/30',
-        yAxisCalloutData: '88%',
-      },
-      {
-        x: 52000,
-        y: 43000,
-        legend: 'Giraffes',
-        color: DefaultPalette.blue,
-        xAxisCalloutData: '2020/04/30',
-        yAxisCalloutData: '71%',
-        lineData: {
-          y: 30000,
-        },
-      },
-      {
-        x: 68000,
-        y: 30000,
-        legend: 'Cats',
-        color: DefaultPalette.blueDark,
-        xAxisCalloutData: '2020/04/30',
-        yAxisCalloutData: '40%',
-        lineData: {
-          y: 5000,
-        },
-      },
-      {
-        x: 80000,
-        y: 20000,
-        legend: 'Elephants',
-        color: DefaultPalette.blue,
-        xAxisCalloutData: '2020/04/30',
-        yAxisCalloutData: '87%',
-        lineData: {
-          y: 16000,
-        },
-      },
-      {
-        x: 92000,
-        y: 45000,
-        legend: 'Monkeys',
-        color: DefaultPalette.blueLight,
-        xAxisCalloutData: '2020/04/30',
-        yAxisCalloutData: '33%',
-        lineData: {
-          y: 40000,
-          yAxisCalloutData: '45%',
-        },
-      },
-    ];
-
-    const lineOptions: ILineChartLineOptions = { lineBorderWidth: '2' };
-
-    const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
-
-    return (
-      <>
-        <label htmlFor="changeWidth">Change Width:</label>
-        <input
-          type="range"
-          value={this.state.width}
-          min={200}
-          max={1000}
-          onChange={this._onWidthChange}
-          id="changeWidth"
-          aria-valuetext={`ChangeWidthSlider${this.state.width}`}
-        />
-        <label htmlFor="changeHeight">Change Height:</label>
-        <input
-          type="range"
-          value={this.state.height}
-          min={200}
-          max={1000}
-          id="changeHeight"
-          onChange={this._onHeightChange}
-          aria-valuetext={`ChangeHeightslider${this.state.height}`}
-        />
-        <ChoiceGroup options={options} defaultSelectedKey="basicExample" onChange={this._onChange} label="Pick one" />
-        <Checkbox
-          label="use single color(This will have only one color)"
-          checked={this.state.useSingleColor}
-          onChange={this._onCheckChange}
-          styles={{ root: { marginTop: '20px' } }}
-        />
-        <Checkbox
-          label="Hide labels"
-          checked={this.state.hideLabels}
-          onChange={this._onHideLabelsCheckChange}
-          styles={{ root: { marginTop: '10px' } }}
-        />
-        <div style={rootStyle}>
-          <VerticalBarChart
-            culture={window.navigator.language}
-            chartTitle="Vertical bar chart basic example "
-            data={points}
-            xAxisTitle="Different categories of animals and fruits"
-            yAxisTitle="Values of each category"
-            width={this.state.width}
-            useSingleColor={this.state.useSingleColor}
-            height={this.state.height}
-            lineLegendText={'just line'}
-            lineLegendColor={'brown'}
-            lineOptions={lineOptions}
-            {...(this.state.isCalloutselected && {
-              onRenderCalloutPerDataPoint: (
-                props: IVerticalBarChartDataPoint,
-                defaultRender: IRenderFunction<IVerticalBarChartDataPoint>,
-              ) => (props ? defaultRender(props) : null),
-            })}
-            hideLabels={this.state.hideLabels}
-            enableReflow={true}
-          />
-        </div>
-      </>
-    );
-  }
-}
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx
index 58d1b2a2d71414..2bc92c2773e39e 100644
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx
@@ -9,6 +9,7 @@ import { DefaultPalette } from '@fluentui/react/lib/Styling';
 import { IRenderFunction } from '@fluentui/react/lib/Utilities';
 import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
+import { Toggle } from '@fluentui/react/lib/Toggle';
 
 interface IVerticalChartState {
   width: number;
@@ -16,6 +17,7 @@ interface IVerticalChartState {
   isCalloutselected: boolean;
   useSingleColor: boolean;
   hideLabels: boolean;
+  showAxisTitles: boolean;
 }
 
 const options: IChoiceGroupOption[] = [
@@ -32,6 +34,7 @@ export class VerticalBarChartBasicExample extends React.Component<IVerticalBarCh
       isCalloutselected: false,
       useSingleColor: false,
       hideLabels: false,
+      showAxisTitles: true,
     };
   }
 
@@ -59,6 +62,10 @@ export class VerticalBarChartBasicExample extends React.Component<IVerticalBarCh
   private _onHideLabelsCheckChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
     this.setState({ hideLabels: checked });
   };
+  private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
+    this.forceUpdate();
+    this.setState({ showAxisTitles: checked });
+  };
 
   private _basicExample(): JSX.Element {
     const points: IVerticalBarChartDataPoint[] = [
@@ -192,27 +199,62 @@ export class VerticalBarChartBasicExample extends React.Component<IVerticalBarCh
           onChange={this._onHideLabelsCheckChange}
           styles={{ root: { marginTop: '10px' } }}
         />
-        <div style={rootStyle}>
-          <VerticalBarChart
-            culture={window.navigator.language}
-            chartTitle="Vertical bar chart basic example "
-            data={points}
-            width={this.state.width}
-            useSingleColor={this.state.useSingleColor}
-            height={this.state.height}
-            lineLegendText={'just line'}
-            lineLegendColor={'brown'}
-            lineOptions={lineOptions}
-            {...(this.state.isCalloutselected && {
-              onRenderCalloutPerDataPoint: (
-                props: IVerticalBarChartDataPoint,
-                defaultRender: IRenderFunction<IVerticalBarChartDataPoint>,
-              ) => (props ? defaultRender(props) : null),
-            })}
-            hideLabels={this.state.hideLabels}
-            enableReflow={true}
-          />
-        </div>
+        <Toggle
+          label="Toggle Axis titles"
+          onText="Show axis titles"
+          offText="Hide axis titles"
+          checked={this.state.showAxisTitles}
+          onChange={this._onToggleAxisTitlesCheckChange}
+          styles={{ root: { marginTop: '10px' } }}
+        />
+        {this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <VerticalBarChart
+              culture={window.navigator.language}
+              chartTitle="Vertical bar chart basic example "
+              data={points}
+              width={this.state.width}
+              useSingleColor={this.state.useSingleColor}
+              height={this.state.height}
+              lineLegendText={'just line'}
+              lineLegendColor={'brown'}
+              lineOptions={lineOptions}
+              {...(this.state.isCalloutselected && {
+                onRenderCalloutPerDataPoint: (
+                  props: IVerticalBarChartDataPoint,
+                  defaultRender: IRenderFunction<IVerticalBarChartDataPoint>,
+                ) => (props ? defaultRender(props) : null),
+              })}
+              hideLabels={this.state.hideLabels}
+              enableReflow={true}
+              yAxisTitle={this.state.showAxisTitles ? 'Different categories of animals and fruits' : undefined}
+              xAxisTitle={this.state.showAxisTitles ? 'Values of each category' : undefined}
+            />
+          </div>
+        )}
+        {!this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <VerticalBarChart
+              culture={window.navigator.language}
+              chartTitle="Vertical bar chart basic example "
+              data={points}
+              width={this.state.width}
+              useSingleColor={this.state.useSingleColor}
+              height={this.state.height}
+              lineLegendText={'just line'}
+              lineLegendColor={'brown'}
+              lineOptions={lineOptions}
+              {...(this.state.isCalloutselected && {
+                onRenderCalloutPerDataPoint: (
+                  props: IVerticalBarChartDataPoint,
+                  defaultRender: IRenderFunction<IVerticalBarChartDataPoint>,
+                ) => (props ? defaultRender(props) : null),
+              })}
+              hideLabels={this.state.hideLabels}
+              enableReflow={true}
+            />
+          </div>
+        )}
       </>
     );
   }
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx
index 0b8136dd02a13d..40498c9b9b464a 100644
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx
+++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx
@@ -13,7 +13,6 @@ import { VerticalBarChartDynamicExample } from './VerticalBarChart.Dynamic.Examp
 import { VerticalBarChartTooltipExample } from './VerticalBarChart.AxisTooltip.Example';
 import { VerticalBarChartCustomAccessibilityExample } from './VerticalBarChart.CustomAccessibility.Example';
 import { VerticalBarChartRotatedLabelExample } from './VerticalBarChart.RotateLabels.Example';
-import { VerticalBarChartAxisTitleExample } from './VerticalBarChart.AxisTitle.Example';
 
 const VerticalBarChartBasicExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx') as string;
@@ -27,8 +26,6 @@ const VerticalBarChartCustomAccessibilityExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.CustomAccessibility.Example.tsx') as string;
 const VerticalBarChartRotateLabelsExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.RotateLabels.Example.tsx') as string;
-const VerticalBarChartAxisTitleLabelsExampleCode =
-  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx') as string;
 
 export class VerticalBarChartPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -59,9 +56,6 @@ export class VerticalBarChartPage extends React.Component<IComponentDemoPageProp
             <ExampleCard title="VerticalBarChart rotate label" code={VerticalBarChartRotateLabelsExampleCode}>
               <VerticalBarChartRotatedLabelExample />
             </ExampleCard>
-            <ExampleCard title="VerticalBarChart axis title" code={VerticalBarChartAxisTitleLabelsExampleCode}>
-              <VerticalBarChartAxisTitleExample />
-            </ExampleCard>
           </div>
         }
         propertiesTables={
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx
index d6f23f3f3c27de..c92dbd607f19d3 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx
@@ -7,6 +7,7 @@ import {
 } from '@fluentui/react-charting';
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
+import { Toggle } from '@fluentui/react/lib/Toggle';
 
 interface IVerticalStackedBarState {
   width: number;
@@ -14,6 +15,8 @@ interface IVerticalStackedBarState {
   barGapMax: number;
   showLine: boolean;
   hideLabels: boolean;
+  showAxisTitles: boolean;
+  margins: {};
 }
 
 export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVerticalStackedBarState> {
@@ -25,10 +28,18 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
       showLine: true,
       barGapMax: 2,
       hideLabels: false,
+      showAxisTitles: true,
+      margins: {
+        top: 20,
+        bottom: 55,
+        right: 40,
+        left: 60,
+      },
     };
   }
+
   public render(): JSX.Element {
-    return <div>{this._basicExample()}</div>;
+    return <div key={'id_VBC'}>{this._basicExample()}</div>;
   }
 
   private _onWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -44,6 +55,30 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
   private _onHideLabelsCheckChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
     this.setState({ hideLabels: checked });
   };
+  private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
+    this.setState({
+      showAxisTitles: checked,
+    });
+    if (checked) {
+      this.setState({
+        margins: {
+          top: 20,
+          bottom: 55,
+          right: 40,
+          left: 60,
+        },
+      });
+    } else {
+      this.setState({
+        margins: {
+          top: 20,
+          bottom: 35,
+          right: 20,
+          left: 40,
+        },
+      });
+    }
+  };
 
   private _basicExample(): JSX.Element {
     const { showLine } = this.state;
@@ -246,22 +281,54 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
           onChange={this._onHideLabelsCheckChange}
           styles={{ root: { marginTop: '10px' } }}
         />
-        <div style={rootStyle}>
-          <VerticalStackedBarChart
-            culture={window.navigator.language}
-            chartTitle="Vertical stacked bar chart basic example"
-            barGapMax={this.state.barGapMax}
-            data={data}
-            height={this.state.height}
-            width={this.state.width}
-            lineOptions={lineOptions}
-            legendProps={{
-              allowFocusOnLegends: true,
-            }}
-            hideLabels={this.state.hideLabels}
-            enableReflow={true}
-          />
-        </div>
+        <Toggle
+          label="Toggle Axis titles"
+          onText="Show axis titles"
+          offText="Hide axis titles"
+          checked={this.state.showAxisTitles}
+          onChange={this._onToggleAxisTitlesCheckChange}
+          styles={{ root: { marginTop: '10px' } }}
+        />
+        {this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <VerticalStackedBarChart
+              culture={window.navigator.language}
+              chartTitle="Vertical stacked bar chart basic example"
+              barGapMax={this.state.barGapMax}
+              data={data}
+              height={this.state.height}
+              width={this.state.width}
+              margins={this.state.margins}
+              lineOptions={lineOptions}
+              legendProps={{
+                allowFocusOnLegends: true,
+              }}
+              hideLabels={this.state.hideLabels}
+              enableReflow={true}
+              yAxisTitle={this.state.showAxisTitles ? 'Variation of number of sales' : undefined}
+              xAxisTitle={this.state.showAxisTitles ? 'Number of days' : undefined}
+            />
+          </div>
+        )}
+        {!this.state.showAxisTitles && (
+          <div style={rootStyle}>
+            <VerticalStackedBarChart
+              culture={window.navigator.language}
+              chartTitle="Vertical stacked bar chart basic example"
+              barGapMax={this.state.barGapMax}
+              data={data}
+              height={this.state.height}
+              width={this.state.width}
+              margins={this.state.margins}
+              lineOptions={lineOptions}
+              legendProps={{
+                allowFocusOnLegends: true,
+              }}
+              hideLabels={this.state.hideLabels}
+              enableReflow={true}
+            />
+          </div>
+        )}
       </>
     );
   }