From b297956947e25508973f1031059a087d2846a511 Mon Sep 17 00:00:00 2001
From: KHMakoto <humbertomakotomorimoto@gmail.com>
Date: Mon, 26 Oct 2020 17:47:29 -0700
Subject: [PATCH 1/2] Charting: Adding tests for VerticalStackedBarChart.

---
 .../VerticalStackedBarChart.test.tsx          |  229 ++
 .../VerticalStackedBarChart.test.tsx.snap     | 2428 +++++++++++++++++
 2 files changed, 2657 insertions(+)
 create mode 100644 packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
 create mode 100644 packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap

diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
new file mode 100644
index 00000000000000..9fd598aad866b3
--- /dev/null
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
@@ -0,0 +1,229 @@
+jest.mock('react-dom');
+import * as React from 'react';
+import { resetIds } from '../../Utilities';
+import * as renderer from 'react-test-renderer';
+import { mount, ReactWrapper } from 'enzyme';
+import { DefaultPalette } from '@fluentui/react/lib/Styling';
+import {
+  IVSChartDataPoint,
+  IVerticalStackedBarChartProps,
+  VerticalStackedBarChart,
+  IVerticalStackedChartProps,
+} from '../../index';
+import { IVerticalStackedBarChartState, VerticalStackedBarChartBase } from './VerticalStackedBarChart.base';
+
+// Wrapper of the VerticalStackedBarChart to be tested.
+let wrapper:
+  | ReactWrapper<IVerticalStackedBarChartProps, IVerticalStackedBarChartState, VerticalStackedBarChartBase>
+  | undefined;
+
+function sharedBeforeEach() {
+  resetIds();
+}
+
+function sharedAfterEach() {
+  if (wrapper) {
+    wrapper.unmount();
+    wrapper = undefined;
+  }
+
+  // Do this after unmounting the wrapper to make sure if any timers cleaned up on unmount are
+  // cleaned up in fake timers world
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if ((global.setTimeout as any).mock) {
+    jest.useRealTimers();
+  }
+}
+
+const firstChartPoints: IVSChartDataPoint[] = [
+  {
+    legend: 'Metadata1',
+    data: 40,
+    color: DefaultPalette.accent,
+    xAxisCalloutData: '2020/04/30',
+    yAxisCalloutData: '40%',
+  },
+  {
+    legend: 'Metadata2',
+    data: 5,
+    color: DefaultPalette.blueMid,
+    xAxisCalloutData: '2020/04/30',
+    yAxisCalloutData: '5%',
+  },
+];
+
+const secondChartPoints: IVSChartDataPoint[] = [
+  {
+    legend: 'Metadata1',
+    data: 30,
+    color: DefaultPalette.accent,
+    xAxisCalloutData: '2020/04/30',
+    yAxisCalloutData: '30%',
+  },
+  {
+    legend: 'Metadata2',
+    data: 20,
+    color: DefaultPalette.blueMid,
+    xAxisCalloutData: '2020/04/30',
+    yAxisCalloutData: '20%',
+  },
+];
+
+const chartPoints: IVerticalStackedChartProps[] = [
+  { chartData: firstChartPoints, xAxisPoint: 0 },
+  { chartData: secondChartPoints, xAxisPoint: 20 },
+];
+
+describe('VerticalStackedBarChart snapShot testing', () => {
+  it('renders VerticalStackedBarChart correctly', () => {
+    const component = renderer.create(<VerticalStackedBarChart data={chartPoints} />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders hideLegend correctly', () => {
+    const component = renderer.create(<VerticalStackedBarChart data={chartPoints} hideLegend={true} />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders hideTooltip correctly', () => {
+    const component = renderer.create(<VerticalStackedBarChart data={chartPoints} hideTooltip={true} />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders enabledLegendsWrapLines correctly', () => {
+    const component = renderer.create(<VerticalStackedBarChart data={chartPoints} enabledLegendsWrapLines={true} />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders showXAxisLablesTooltip correctly', () => {
+    const component = renderer.create(<VerticalStackedBarChart data={chartPoints} showXAxisLablesTooltip={true} />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders wrapXAxisLables correctly', () => {
+    const component = renderer.create(<VerticalStackedBarChart data={chartPoints} wrapXAxisLables={true} />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders isCalloutForStack correctly', () => {
+    const component = renderer.create(<VerticalStackedBarChart data={chartPoints} isCalloutForStack={true} />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders yAxisTickFormat correctly', () => {
+    const component = renderer.create(<VerticalStackedBarChart data={chartPoints} yAxisTickFormat={'/%d'} />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe('VerticalStackedBarChart - basic props', () => {
+  beforeEach(sharedBeforeEach);
+  afterEach(sharedAfterEach);
+
+  it('Should not mount legend when hideLegend true ', () => {
+    wrapper = mount(<VerticalStackedBarChart data={chartPoints} hideLegend={true} />);
+    const hideLegendDOM = wrapper.getDOMNode().querySelectorAll('[class^="legendContainer"]');
+    expect(hideLegendDOM!.length).toBe(0);
+  });
+
+  it('Should mount legend when hideLegend false ', () => {
+    wrapper = mount(<VerticalStackedBarChart data={chartPoints} />);
+    const hideLegendDOM = wrapper.getDOMNode().querySelectorAll('[class^="legendContainer"]');
+    expect(hideLegendDOM).toBeDefined();
+  });
+
+  it('Should mount callout when hideTootip false ', () => {
+    wrapper = mount(<VerticalStackedBarChart data={chartPoints} />);
+    const hideTooltipDom = wrapper.getDOMNode().querySelectorAll('[class^="ms-Layer"]');
+    expect(hideTooltipDom).toBeDefined();
+  });
+
+  it('Should not mount callout when hideTootip true ', () => {
+    wrapper = mount(<VerticalStackedBarChart data={chartPoints} hideTooltip={true} />);
+    const hideTooltipDom = wrapper.getDOMNode().querySelectorAll('[class^="ms-Layer"]');
+    expect(hideTooltipDom.length).toBe(0);
+  });
+
+  it('Should render onRenderCalloutPerStack ', () => {
+    wrapper = mount(
+      <VerticalStackedBarChart
+        data={chartPoints}
+        onRenderCalloutPerStack={(props: IVerticalStackedChartProps) =>
+          props ? (
+            <div className="onRenderCalloutPerStack">
+              <p>Custom Callout Content</p>
+            </div>
+          ) : null
+        }
+      />,
+    );
+    const renderedDOM = wrapper.getDOMNode().getElementsByClassName('.onRenderCalloutPerStack');
+    expect(renderedDOM).toBeDefined();
+  });
+
+  it('Should not render onRenderCalloutPerStack ', () => {
+    wrapper = mount(<VerticalStackedBarChart data={chartPoints} />);
+    const renderedDOM = wrapper.getDOMNode().getElementsByClassName('.onRenderCalloutPerStack');
+    expect(renderedDOM!.length).toBe(0);
+  });
+
+  it('Should render onRenderCalloutPerDataPoint ', () => {
+    wrapper = mount(
+      <VerticalStackedBarChart
+        data={chartPoints}
+        onRenderCalloutPerDataPoint={(props: IVSChartDataPoint) =>
+          props ? (
+            <div className="onRenderCalloutPerDataPoint">
+              <p>Custom Callout Content</p>
+            </div>
+          ) : null
+        }
+      />,
+    );
+    const renderedDOM = wrapper.getDOMNode().getElementsByClassName('.onRenderCalloutPerDataPoint');
+    expect(renderedDOM).toBeDefined();
+  });
+
+  it('Should not render onRenderCalloutPerDataPoint ', () => {
+    wrapper = mount(<VerticalStackedBarChart data={chartPoints} />);
+    const renderedDOM = wrapper.getDOMNode().getElementsByClassName('.onRenderCalloutPerDataPoint');
+    expect(renderedDOM!.length).toBe(0);
+  });
+});
+
+describe('Render calling with respective to props', () => {
+  it('No prop changes', () => {
+    const renderMock = jest.spyOn(VerticalStackedBarChartBase.prototype, 'render');
+    const props = {
+      data: chartPoints,
+      height: 300,
+      width: 600,
+    };
+    const component = mount(<VerticalStackedBarChart {...props} />);
+    component.setProps({ ...props });
+    expect(renderMock).toHaveBeenCalledTimes(2);
+    renderMock.mockRestore();
+  });
+
+  it('prop changes', () => {
+    const renderMock = jest.spyOn(VerticalStackedBarChartBase.prototype, 'render');
+    const props = {
+      data: chartPoints,
+      height: 300,
+      width: 600,
+      hideLegend: true,
+    };
+    const component = mount(<VerticalStackedBarChart {...props} />);
+    component.setProps({ ...props, hideTooltip: true });
+    expect(renderMock).toHaveBeenCalledTimes(2);
+    renderMock.mockRestore();
+  });
+});
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
new file mode 100644
index 00000000000000..0c77764e96fa27
--- /dev/null
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
@@ -0,0 +1,2428 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChart correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_1"
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone2"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_1"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              fill: #323130;
+              opacity: 0.2;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_1"
+        transform="translate(40, 0)"
+      />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              className=
+                  ms-OverflowSet
+                  {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: unset;
+                    position: relative;
+                  }
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata1"
+                  aria-posinset={1}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #0078d4;
+                          background-image: ;
+                          border-color: #0078d4;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #0078d4, #0078d4);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata1
+                  </div>
+                </button>
+              </div>
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata2"
+                  aria-posinset={2}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #00188f;
+                          background-image: ;
+                          border-color: #00188f;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #00188f, #00188f);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata2
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_10"
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone11"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_10"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              fill: #323130;
+              opacity: 0.2;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_10"
+        transform="translate(40, 0)"
+      />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        className=
+            ms-OverflowSet
+            {
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: unset;
+              position: relative;
+            }
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet-item
+              {
+                display: inherit;
+                flex-shrink: 0;
+              }
+        >
+          <button
+            aria-label="Metadata1"
+            aria-posinset={1}
+            aria-selected={false}
+            aria-setsize={2}
+            className=
+
+                {
+                  align-items: center;
+                  background: none;
+                  border: none;
+                  cursor: pointer;
+                  display: flex;
+                  outline: transparent;
+                  padding-bottom: 8px;
+                  padding-left: 8px;
+                  padding-right: 8px;
+                  padding-top: 8px;
+                  position: relative;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid transparent;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #605e5c;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                  outline-color: #605e5c;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="option"
+          >
+            <div
+              className=
+
+                  {
+                    background-color: #0078d4;
+                    background-image: ;
+                    border-color: #0078d4;
+                    border: 1px solid;
+                    height: 12px;
+                    margin-right: 8px;
+                    opacity: ;
+                    width: 12px;
+                  }
+                  @media screen and (-ms-high-contrast: active){& {
+                    background-image: linear-gradient(to right, #0078d4, #0078d4);
+                    opacity: ;
+                  }
+            />
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #323130;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: ;
+                  }
+            >
+              Metadata1
+            </div>
+          </button>
+        </div>
+        <div
+          className=
+              ms-OverflowSet-item
+              {
+                display: inherit;
+                flex-shrink: 0;
+              }
+        >
+          <button
+            aria-label="Metadata2"
+            aria-posinset={2}
+            aria-selected={false}
+            aria-setsize={2}
+            className=
+
+                {
+                  align-items: center;
+                  background: none;
+                  border: none;
+                  cursor: pointer;
+                  display: flex;
+                  outline: transparent;
+                  padding-bottom: 8px;
+                  padding-left: 8px;
+                  padding-right: 8px;
+                  padding-top: 8px;
+                  position: relative;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid transparent;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #605e5c;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                  outline-color: #605e5c;
+                }
+            data-is-focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="option"
+          >
+            <div
+              className=
+
+                  {
+                    background-color: #00188f;
+                    background-image: ;
+                    border-color: #00188f;
+                    border: 1px solid;
+                    height: 12px;
+                    margin-right: 8px;
+                    opacity: ;
+                    width: 12px;
+                  }
+                  @media screen and (-ms-high-contrast: active){& {
+                    background-image: linear-gradient(to right, #00188f, #00188f);
+                    opacity: ;
+                  }
+            />
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #323130;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: ;
+                  }
+            >
+              Metadata2
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_4"
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone5"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_4"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              fill: #323130;
+              opacity: 0.2;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_4"
+        transform="translate(40, 0)"
+      />
+      <g />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_7"
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone8"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_7"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              fill: #323130;
+              opacity: 0.2;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_7"
+        transform="translate(40, 0)"
+      />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              className=
+                  ms-OverflowSet
+                  {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: unset;
+                    position: relative;
+                  }
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata1"
+                  aria-posinset={1}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #0078d4;
+                          background-image: ;
+                          border-color: #0078d4;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #0078d4, #0078d4);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata1
+                  </div>
+                </button>
+              </div>
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata2"
+                  aria-posinset={2}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #00188f;
+                          background-image: ;
+                          border-color: #00188f;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #00188f, #00188f);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata2
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_19"
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone20"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_19"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              fill: #323130;
+              opacity: 0.2;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_19"
+        transform="translate(40, 0)"
+      />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              className=
+                  ms-OverflowSet
+                  {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: unset;
+                    position: relative;
+                  }
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata1"
+                  aria-posinset={1}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #0078d4;
+                          background-image: ;
+                          border-color: #0078d4;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #0078d4, #0078d4);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata1
+                  </div>
+                </button>
+              </div>
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata2"
+                  aria-posinset={2}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #00188f;
+                          background-image: ;
+                          border-color: #00188f;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #00188f, #00188f);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata2
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_13"
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone14"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_13"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              fill: #323130;
+              opacity: 0.2;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_13"
+        transform="translate(40, 0)"
+      />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              className=
+                  ms-OverflowSet
+                  {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: unset;
+                    position: relative;
+                  }
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata1"
+                  aria-posinset={1}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #0078d4;
+                          background-image: ;
+                          border-color: #0078d4;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #0078d4, #0078d4);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata1
+                  </div>
+                </button>
+              </div>
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata2"
+                  aria-posinset={2}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #00188f;
+                          background-image: ;
+                          border-color: #00188f;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #00188f, #00188f);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata2
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_16"
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone17"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_16"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              fill: #323130;
+              opacity: 0.2;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_16"
+        transform="translate(40, 0)"
+      />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              className=
+                  ms-OverflowSet
+                  {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: unset;
+                    position: relative;
+                  }
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata1"
+                  aria-posinset={1}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #0078d4;
+                          background-image: ;
+                          border-color: #0078d4;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #0078d4, #0078d4);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata1
+                  </div>
+                </button>
+              </div>
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata2"
+                  aria-posinset={2}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #00188f;
+                          background-image: ;
+                          border-color: #00188f;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #00188f, #00188f);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata2
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_22"
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone23"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_22"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 400;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              fill: #323130;
+              opacity: 0.2;
+            }
+            @media screen and (-ms-high-contrast: white-on-black){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_22"
+        transform="translate(40, 0)"
+      />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              className=
+                  ms-OverflowSet
+                  {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: unset;
+                    position: relative;
+                  }
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata1"
+                  aria-posinset={1}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #0078d4;
+                          background-image: ;
+                          border-color: #0078d4;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #0078d4, #0078d4);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata1
+                  </div>
+                </button>
+              </div>
+              <div
+                className=
+                    ms-OverflowSet-item
+                    {
+                      display: inherit;
+                      flex-shrink: 0;
+                    }
+              >
+                <button
+                  aria-label="Metadata2"
+                  aria-posinset={2}
+                  aria-selected={false}
+                  aria-setsize={2}
+                  className=
+
+                      {
+                        align-items: center;
+                        background: none;
+                        border: none;
+                        cursor: pointer;
+                        display: flex;
+                        outline: transparent;
+                        padding-bottom: 8px;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 8px;
+                        position: relative;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid transparent;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        outline-color: #605e5c;
+                      }
+                  data-is-focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  role="option"
+                >
+                  <div
+                    className=
+
+                        {
+                          background-color: #00188f;
+                          background-image: ;
+                          border-color: #00188f;
+                          border: 1px solid;
+                          height: 12px;
+                          margin-right: 8px;
+                          opacity: ;
+                          width: 12px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          background-image: linear-gradient(to right, #00188f, #00188f);
+                          opacity: ;
+                        }
+                  />
+                  <div
+                    className=
+
+                        {
+                          -moz-osx-font-smoothing: grayscale;
+                          -webkit-font-smoothing: antialiased;
+                          color: #323130;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 12px;
+                          font-weight: 400;
+                          line-height: 16px;
+                          opacity: ;
+                        }
+                  >
+                    Metadata2
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

From 41301b45248eeac1ad10fb19dd702a9f0eca05bd Mon Sep 17 00:00:00 2001
From: KHMakoto <humbertomakotomorimoto@gmail.com>
Date: Mon, 26 Oct 2020 17:48:27 -0700
Subject: [PATCH 2/2] Change files

---
 ...-2020-10-26-17-48-27-verticalStackedBarChartTests.json | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 change/@fluentui-react-charting-2020-10-26-17-48-27-verticalStackedBarChartTests.json

diff --git a/change/@fluentui-react-charting-2020-10-26-17-48-27-verticalStackedBarChartTests.json b/change/@fluentui-react-charting-2020-10-26-17-48-27-verticalStackedBarChartTests.json
new file mode 100644
index 00000000000000..8f72307fd257f5
--- /dev/null
+++ b/change/@fluentui-react-charting-2020-10-26-17-48-27-verticalStackedBarChartTests.json
@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "Charting: Adding tests for VerticalStackedBarChart.",
+  "packageName": "@fluentui/react-charting",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "none",
+  "date": "2020-10-27T00:48:27.433Z"
+}