diff --git a/change/@fluentui-react-charting-fd86b4aa-b2f7-413c-83e4-4cb434fe6a75.json b/change/@fluentui-react-charting-fd86b4aa-b2f7-413c-83e4-4cb434fe6a75.json
new file mode 100644
index 0000000000000..1683e09d73c65
--- /dev/null
+++ b/change/@fluentui-react-charting-fd86b4aa-b2f7-413c-83e4-4cb434fe6a75.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Modify hover card as per design",
+  "packageName": "@fluentui/react-charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
index dd51632647b90..9f91f5ffad5a5 100644
--- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
@@ -423,38 +423,32 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
-            style={Object {}}
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
               data-is-focusable={false}
               role="text"
@@ -467,69 +461,68 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
           >
             <div
               data-is-focusable={false}
-              key="callout-content-0"
               role="text"
-              style={Object {}}
+              style={
+                Object {
+                  "marginBottom": "0px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
             >
-              <div
-                style={Object {}}
-              >
+              <div>
                 <div
                   className=
 
                       {
-                        -moz-osx-font-smoothing: grayscale;
-                        -webkit-font-smoothing: antialiased;
-                        border-left: 4px solid red;
-                        color: #323130;
-                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                        font-size: 16px;
-                        font-weight: 400;
-                        margin-top: 13px;
-                        padding-left: 8px;
-                      }
-                      @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                        forced-color-adjust: none;
+                        align-items: center;
+                        display: flex;
                       }
                   id="0_80"
                 >
-                  <div>
-                    <div
-                      className=
+                  <svg
+                    className=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #605e5c;
-                            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;
-                          }
-                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                            color: rgb(255, 255, 255);
-                          }
-                    >
-                       
-                      metaData1
-                    </div>
-                    <div
-                      className=
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="red"
+                    />
+                  </svg>
+                  <div
+                    className=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 16px;
-                            font-weight: bold;
-                            line-height: 22px;
-                          }
-                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                            color: rgb(255, 255, 255);
-                          }
-                    >
-                      80
-                    </div>
+                        {
+                          flex-grow: 1;
+                          overflow: hidden;
+                          text-overflow: ellipsis;
+                          white-space: nowrap;
+                        }
+                    style={
+                      Object {
+                        "marginRight": "24px",
+                      }
+                    }
+                  >
+                    metaData1
+                  </div>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    80
                   </div>
                 </div>
               </div>
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap
index 8df081a9230a2..4345da0667a56 100644
--- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap
@@ -750,38 +750,32 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
-            style={Object {}}
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
               data-is-focusable={false}
               role="text"
@@ -794,69 +788,68 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
           >
             <div
               data-is-focusable={false}
-              key="callout-content-0"
               role="text"
-              style={Object {}}
+              style={
+                Object {
+                  "marginBottom": "0px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
             >
-              <div
-                style={Object {}}
-              >
+              <div>
                 <div
                   className=
 
                       {
-                        -moz-osx-font-smoothing: grayscale;
-                        -webkit-font-smoothing: antialiased;
-                        border-left: 4px solid red;
-                        color: #323130;
-                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                        font-size: 16px;
-                        font-weight: 400;
-                        margin-top: 13px;
-                        padding-left: 8px;
-                      }
-                      @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                        forced-color-adjust: none;
+                        align-items: center;
+                        display: flex;
                       }
                   id="0_80"
                 >
-                  <div>
-                    <div
-                      className=
+                  <svg
+                    className=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #605e5c;
-                            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;
-                          }
-                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                            color: rgb(255, 255, 255);
-                          }
-                    >
-                       
-                      metaData1
-                    </div>
-                    <div
-                      className=
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="red"
+                    />
+                  </svg>
+                  <div
+                    className=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 16px;
-                            font-weight: bold;
-                            line-height: 22px;
-                          }
-                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                            color: rgb(255, 255, 255);
-                          }
-                    >
-                      80
-                    </div>
+                        {
+                          flex-grow: 1;
+                          overflow: hidden;
+                          text-overflow: ellipsis;
+                          white-space: nowrap;
+                        }
+                    style={
+                      Object {
+                        "marginRight": "24px",
+                      }
+                    }
+                  >
+                    metaData1
+                  </div>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    80
                   </div>
                 </div>
               </div>
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
index dd9fd3cec6264..2c7ca58ed424f 100644
--- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
+++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -32,6 +32,7 @@ import {
   calculateLongestLabelWidth,
   createYAxisLabels,
   ChartTypes,
+  ChartHoverCardVariant,
 } from '../../utilities/index';
 import { LegendShape, Shape } from '../Legends/index';
 
@@ -509,12 +510,10 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _multiValueCallout = (calloutProps: any) => {
     const yValueHoverSubCountsExists: boolean = this._yValueHoverSubCountsExists(calloutProps.YValueHover);
+
     return (
       <div className={this._classNames.calloutContentRoot}>
-        <div
-          className={this._classNames.calloutDateTimeContainer}
-          style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}
-        >
+        <div className={this._classNames.calloutDateTimeContainer}>
           <div
             className={this._classNames.calloutContentX}
             {...getAccessibleDataObject(calloutProps!.xAxisCalloutAccessibilityData, 'text', false)}
@@ -531,34 +530,28 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
               const isLast: boolean = index + 1 === yValues.length;
               const { shouldDrawBorderBottom = false } = yValue;
               return (
-                <div
-                  {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}
-                  key={`callout-content-${index}`}
-                  style={
-                    yValueHoverSubCountsExists
-                      ? {
-                          display: 'inline-block',
-                          ...(shouldDrawBorderBottom && {
-                            borderBottom: `1px solid ${this.props.theme!.semanticColors.menuDivider}`,
-                            paddingBottom: '10px',
-                          }),
-                        }
-                      : {
-                          ...(shouldDrawBorderBottom && {
-                            borderBottom: `1px solid ${this.props.theme!.semanticColors.menuDivider}`,
-                            paddingBottom: '10px',
-                          }),
-                        }
-                  }
-                >
-                  {this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}
-                </div>
+                <React.Fragment key={`callout-content-${index}`}>
+                  <div
+                    {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}
+                    style={{
+                      paddingLeft: !yValueHoverSubCountsExists || index === 0 ? '0px' : '16px',
+                      paddingRight: !yValueHoverSubCountsExists || isLast ? '0px' : '16px',
+                      marginBottom: yValueHoverSubCountsExists || isLast ? '0px' : '8px',
+                    }}
+                  >
+                    {this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}
+                  </div>
+                  {shouldDrawBorderBottom && <div className={this._classNames.divider} />}
+                </React.Fragment>
               );
             })}
-          {!!calloutProps.descriptionMessage && (
-            <div className={this._classNames.descriptionMessage}>{calloutProps.descriptionMessage}</div>
-          )}
         </div>
+        {!!calloutProps.descriptionMessage && (
+          <>
+            <div className={this._classNames.divider} />
+            <div className={this._classNames.descriptionMessage}>{calloutProps.descriptionMessage}</div>
+          </>
+        )}
       </div>
     );
   };
@@ -583,46 +576,41 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
     yValueHoverSubCountsExists: boolean,
     isLast: boolean,
   ): React.ReactNode {
-    const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };
     const toDrawShape = xValue.index !== undefined && xValue.index !== -1;
-    const _classNames = getClassNames(this.props.styles!, {
-      theme: this.props.theme!,
-      width: this.state._width,
-      height: this.state._height,
-      className: this.props.className,
-      isRtl: this._isRtl,
-      lineColor: xValue.color,
-      toDrawShape,
-    });
 
-    const { culture } = this.props;
+    const { culture, calloutVariant } = this.props;
     const yValue = convertToLocaleString(xValue.y, culture);
     if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {
       return (
-        <div style={yValueHoverSubCountsExists ? marginStyle : {}}>
+        <div>
           {yValueHoverSubCountsExists && (
-            <div className="ms-fontWeight-semibold" style={{ fontSize: '12pt' }}>
+            <div className={this._classNames.calloutContentX} style={{ marginBottom: '8px' }}>
               {xValue.legend!} ({yValue})
             </div>
           )}
-          <div id={`${index}_${xValue.y}`} className={_classNames.calloutBlockContainer}>
-            {toDrawShape && (
-              <Shape
-                svgProps={{
-                  className: _classNames.shapeStyles,
-                }}
-                pathProps={{ fill: xValue.color }}
-                shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}
-              />
-            )}
-            <div>
-              <div className={_classNames.calloutlegendText}> {xValue.legend}</div>
-              <div className={_classNames.calloutContentY}>
-                {convertToLocaleString(
-                  xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data,
-                  culture,
-                )}
+          {(yValueHoverSubCountsExists || calloutVariant === ChartHoverCardVariant.LongLegend) && (
+            <div className={this._classNames.calloutlegendText} style={{ marginBottom: '4px' }}>
+              {xValue.legend}
+            </div>
+          )}
+          <div id={`${index}_${xValue.y}`} className={this._classNames.calloutBlockContainer}>
+            <Shape
+              svgProps={{
+                className: this._classNames.shapeStyles,
+              }}
+              pathProps={{ fill: xValue.color }}
+              shape={Points[toDrawShape ? xValue.index! % Object.keys(pointTypes).length : 1] as LegendShape}
+            />
+            {!yValueHoverSubCountsExists && calloutVariant !== ChartHoverCardVariant.LongLegend && (
+              <div className={this._classNames.calloutlegendText} style={{ marginRight: '24px' }}>
+                {xValue.legend}
               </div>
+            )}
+            <div className={this._classNames.calloutContentY}>
+              {convertToLocaleString(
+                xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data,
+                culture,
+              )}
             </div>
           </div>
         </div>
@@ -630,16 +618,27 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
     } else {
       const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };
       return (
-        <div style={marginStyle}>
-          <div className="ms-fontWeight-semibold" style={{ fontSize: '12pt' }}>
+        <div>
+          <div className={this._classNames.calloutContentX} style={{ marginBottom: '8px' }}>
             {xValue.legend!} ({yValue})
           </div>
-          {Object.keys(subcounts).map((subcountName: string) => {
+          {Object.keys(subcounts).map((subcountName: string, idx, sc) => {
             return (
-              <div key={subcountName} className={_classNames.calloutBlockContainer}>
-                <div className={_classNames.calloutlegendText}> {convertToLocaleString(subcountName, culture)}</div>
-                <div className={_classNames.calloutContentY}>
-                  {convertToLocaleString(subcounts[subcountName], culture)}
+              <div key={subcountName} style={idx + 1 === sc.length ? {} : { marginBottom: '8px' }}>
+                <div className={this._classNames.calloutlegendText} style={{ marginBottom: '4px' }}>
+                  {convertToLocaleString(subcountName, culture)}
+                </div>
+                <div className={this._classNames.calloutBlockContainer}>
+                  <Shape
+                    svgProps={{
+                      className: this._classNames.shapeStyles,
+                    }}
+                    pathProps={{ fill: xValue.color }}
+                    shape={Points[toDrawShape ? xValue.index! % Object.keys(pointTypes).length : 1] as LegendShape}
+                  />
+                  <div className={this._classNames.calloutContentY}>
+                    {convertToLocaleString(subcounts[subcountName], culture)}
+                  </div>
                 </div>
               </div>
             );
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts
index 783b67fb24f27..ec3b227afe3ef 100644
--- a/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts
+++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts
@@ -1,12 +1,12 @@
 import { ICartesianChartStyleProps, ICartesianChartStyles } from './CartesianChart.types';
-import { HighContrastSelectorBlack, HighContrastSelector } from '@fluentui/react/lib/Styling';
+import { HighContrastSelectorBlack, FontWeights, FontSizes } from '@fluentui/react/lib/Styling';
 import { isIE11 } from '@fluentui/react';
 
 const isIE11Var: boolean = isIE11();
 
 export const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyles => {
-  const { className, theme, isRtl, shouldHighlight, href, lineColor = 'transparent', toDrawShape } = props;
-  const { fonts } = theme!;
+  const { className, theme, isRtl, shouldHighlight, href } = props;
+
   return {
     root: [
       theme.fonts.medium,
@@ -99,85 +99,54 @@ export const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyl
         marginLeft: '20px',
       },
     ],
-    calloutContentRoot: [
-      {
-        display: 'grid',
-        overflow: 'hidden',
-        padding: '11px 16px 10px 16px',
-        backgroundColor: theme.semanticColors.bodyBackground,
-        backgroundBlendMode: 'normal, luminosity',
-      },
-    ],
+
+    calloutContentRoot: {
+      ...theme.fonts.medium,
+      color: theme.semanticColors.bodyText,
+      padding: '16px',
+      backgroundColor: theme.semanticColors.bodyBackground,
+      backgroundBlendMode: 'normal, luminosity',
+    },
+
     calloutDateTimeContainer: {
+      marginBottom: '8px',
+    },
+
+    calloutContentX: {
+      fontWeight: FontWeights.semibold,
+    },
+
+    calloutBlockContainer: {
       display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
+      alignItems: 'center',
     },
-    calloutContentX: [
-      {
-        ...fonts.small,
-        lineHeight: '16px',
-        opacity: '0.8',
-        color: theme.semanticColors.bodySubtext,
-      },
-    ],
-    calloutBlockContainer: [
-      theme.fonts.mediumPlus,
-      {
-        marginTop: '13px',
-        color: theme.semanticColors.bodyText,
-      },
-      !toDrawShape && {
-        selectors: {
-          [HighContrastSelector]: {
-            forcedColorAdjust: 'none',
-          },
-        },
-        borderLeft: `4px solid ${lineColor}`,
-        paddingLeft: '8px',
-      },
-      toDrawShape && {
-        display: 'flex',
-      },
-    ],
+
     shapeStyles: {
       marginRight: '8px',
+      flexShrink: 0,
     },
+
     calloutlegendText: {
-      ...fonts.small,
-      lineHeight: '16px',
-      selectors: {
-        [HighContrastSelectorBlack]: {
-          color: 'rgb(255, 255, 255)',
-        },
-      },
-      color: theme.semanticColors.bodySubtext,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      flexGrow: 1,
+    },
+
+    calloutContentY: {
+      fontWeight: FontWeights.semibold,
+      flexShrink: 0,
+    },
+
+    divider: {
+      height: '1px',
+      backgroundColor: '#c8c8c8',
+      marginTop: '8px',
+      marginBottom: '8px',
+    },
+
+    descriptionMessage: {
+      fontSize: FontSizes.small,
     },
-    calloutContentY: [
-      {
-        ...fonts.mediumPlus,
-        fontWeight: 'bold',
-        lineHeight: '22px',
-        selectors: {
-          [HighContrastSelectorBlack]: {
-            color: 'rgb(255, 255, 255)',
-          },
-        },
-      },
-    ],
-    descriptionMessage: [
-      theme.fonts.small,
-      {
-        selectors: {
-          [HighContrastSelectorBlack]: {
-            color: 'rgb(255, 255, 255)',
-          },
-        },
-        color: theme.semanticColors.bodyText,
-        marginTop: '10px',
-        paddingTop: '10px',
-        borderTop: `1px solid ${theme.semanticColors.menuDivider}`,
-      },
-    ],
   };
 };
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
index f479a0b4b372f..1c445ed8176b7 100644
--- a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
+++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
@@ -6,7 +6,7 @@ import { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
 import { IAccessibilityProps, IMargins } from '../../types/index';
-import { ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index';
+import { ChartHoverCardVariant, ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index';
 import * as d3TimeFormat from 'd3-time-format';
 
 export interface ICartesianChartStyleProps {
@@ -49,16 +49,6 @@ export interface ICartesianChartStyleProps {
    * prop to check if the Page is in Rtl
    */
   isRtl?: boolean;
-
-  /**
-   * color of the line
-   */
-  lineColor?: string;
-
-  /**
-   * boolean flag which determines if shape is drawn in callout
-   */
-  toDrawShape?: boolean;
 }
 
 export interface ICartesianChartStyles {
@@ -151,6 +141,11 @@ export interface ICartesianChartStyles {
    * Styles for the chart wrapper div
    */
   chartWrapper?: IStyle;
+
+  /**
+   * Styles for the group divider in callout
+   */
+  divider?: IStyle;
 }
 
 export interface ICartesianChartProps {
@@ -380,6 +375,12 @@ export interface ICartesianChartProps {
    * @default True for LineChart but False for other charts
    */
   enableReflow?: boolean;
+
+  /**
+   * Specifies the variant of hover card to be rendered
+   * @defaultvalue ChartHoverCardVariant.ShortLegend
+   */
+  calloutVariant?: ChartHoverCardVariant;
 }
 
 export interface IYValueHover {
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
index 530573c78d09e..919da1b80955e 100644
--- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
+++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
@@ -199,87 +199,74 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
+              2020/04/30
                
             </div>
           </div>
           <div
-            className=""
+            className=
+
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #E5E5E5;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: unset;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
-              <div
+              <svg
                 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;
+                      flex-shrink: 0;
+                      margin-right: 8px;
                     }
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
               >
-                2020/04/30
-              </div>
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="#E5E5E5"
+                />
+              </svg>
               <div
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #E5E5E5;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 20,000
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
index 551ad53f5f2a7..6095723f1e96d 100644
--- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
@@ -172,87 +172,74 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
             class=
 
                 {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
                   background-blend-mode: normal, luminosity;
                   background-color: #ffffff;
-                  display: grid;
-                  overflow: hidden;
-                  padding-bottom: 10px;
+                  color: #323130;
+                  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;
+                  padding-bottom: 16px;
                   padding-left: 16px;
                   padding-right: 16px;
-                  padding-top: 11px;
+                  padding-top: 16px;
                 }
           >
             <div
               class=
 
                   {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-between;
+                    margin-bottom: 8px;
                   }
             >
               <div
                 class=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      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: 0.8;
+                      font-weight: 600;
                     }
               >
+                2020/04/30
                  
               </div>
             </div>
             <div
-              class=""
+              class=
+
+
             >
               <div
                 class=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      border-left: 4px solid #E5E5E5;
-                      color: #323130;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: 600;
-                      line-height: 22px;
-                      margin-top: unset;
-                      padding-left: 8px;
+                      align-items: center;
+                      display: flex;
                     }
               >
-                <div
+                <svg
                   class=
 
                       {
-                        -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;
+                        flex-shrink: 0;
+                        margin-right: 8px;
                       }
+                  height="14"
+                  transform="rotate(0, 0, 0)"
+                  viewBox="-1 -1 14 14"
+                  width="14"
                 >
-                  2020/04/30
-                </div>
+                  <path
+                    d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                    fill="#E5E5E5"
+                  />
+                </svg>
                 <div
                   class=
 
                       {
-                        -moz-osx-font-smoothing: grayscale;
-                        -webkit-font-smoothing: antialiased;
-                        color: #E5E5E5;
-                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                        font-size: 28px;
-                        font-weight: bold;
-                        line-height: 36px;
+                        flex-shrink: 0;
+                        font-weight: 600;
                       }
                 >
                   20,000
@@ -1234,87 +1221,74 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
+              2020/04/30
                
             </div>
           </div>
           <div
-            className=""
+            className=
+
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #E5E5E5;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: unset;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
-              <div
+              <svg
                 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;
+                      flex-shrink: 0;
+                      margin-right: 8px;
                     }
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
               >
-                2020/04/30
-              </div>
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="#E5E5E5"
+                />
+              </svg>
               <div
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #E5E5E5;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 20,000
diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.base.tsx b/packages/react-charting/src/components/GaugeChart/GaugeChart.base.tsx
index bb9514b785679..130ad44a3fd35 100644
--- a/packages/react-charting/src/components/GaugeChart/GaugeChart.base.tsx
+++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.base.tsx
@@ -10,6 +10,7 @@ import {
 } from './GaugeChart.types';
 import { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 import {
+  ChartHoverCardVariant,
   Points,
   convertToLocaleString,
   formatValueWithSIPrefix,
@@ -518,12 +519,10 @@ export class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChar
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _multiValueCallout = (calloutProps: any) => {
     const yValueHoverSubCountsExists: boolean = this._yValueHoverSubCountsExists(calloutProps.YValueHover);
+
     return (
       <div className={this._classNames.calloutContentRoot}>
-        <div
-          className={this._classNames.calloutDateTimeContainer}
-          style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}
-        >
+        <div className={this._classNames.calloutDateTimeContainer}>
           <div
             className={this._classNames.calloutContentX}
             {...getAccessibleDataObject(calloutProps!.xAxisCalloutAccessibilityData, 'text', false)}
@@ -540,34 +539,28 @@ export class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChar
               const isLast: boolean = index + 1 === yValues.length;
               const { shouldDrawBorderBottom = false } = yValue;
               return (
-                <div
-                  {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}
-                  key={`callout-content-${index}`}
-                  style={
-                    yValueHoverSubCountsExists
-                      ? {
-                          display: 'inline-block',
-                          ...(shouldDrawBorderBottom && {
-                            borderBottom: `1px solid ${this.props.theme!.semanticColors.menuDivider}`,
-                            paddingBottom: '10px',
-                          }),
-                        }
-                      : {
-                          ...(shouldDrawBorderBottom && {
-                            borderBottom: `1px solid ${this.props.theme!.semanticColors.menuDivider}`,
-                            paddingBottom: '10px',
-                          }),
-                        }
-                  }
-                >
-                  {this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}
-                </div>
+                <React.Fragment key={`callout-content-${index}`}>
+                  <div
+                    {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}
+                    style={{
+                      paddingLeft: !yValueHoverSubCountsExists || index === 0 ? '0px' : '16px',
+                      paddingRight: !yValueHoverSubCountsExists || isLast ? '0px' : '16px',
+                      marginBottom: yValueHoverSubCountsExists || isLast ? '0px' : '8px',
+                    }}
+                  >
+                    {this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}
+                  </div>
+                  {shouldDrawBorderBottom && <div className={this._classNames.divider} />}
+                </React.Fragment>
               );
             })}
-          {!!calloutProps.descriptionMessage && (
-            <div className={this._classNames.descriptionMessage}>{calloutProps.descriptionMessage}</div>
-          )}
         </div>
+        {!!calloutProps.descriptionMessage && (
+          <>
+            <div className={this._classNames.divider} />
+            <div className={this._classNames.descriptionMessage}>{calloutProps.descriptionMessage}</div>
+          </>
+        )}
       </div>
     );
   };
@@ -592,42 +585,41 @@ export class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChar
     yValueHoverSubCountsExists: boolean,
     isLast: boolean,
   ): React.ReactNode {
-    const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };
     const toDrawShape = xValue.index !== undefined && xValue.index !== -1;
-    const _classNames = getClassNames(this.props.styles!, {
-      theme: this.props.theme!,
-      lineColor: xValue.color,
-      toDrawShape,
-    });
 
-    const { culture } = this.props;
+    const { culture, calloutVariant } = this.props;
     const yValue = convertToLocaleString(xValue.y, culture);
     if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {
       return (
-        <div style={yValueHoverSubCountsExists ? marginStyle : {}}>
+        <div>
           {yValueHoverSubCountsExists && (
-            <div className="ms-fontWeight-semibold" style={{ fontSize: '12pt' }}>
+            <div className={this._classNames.calloutContentX} style={{ marginBottom: '8px' }}>
               {xValue.legend!} ({yValue})
             </div>
           )}
-          <div id={`${index}_${xValue.y}`} className={_classNames.calloutBlockContainer}>
-            {toDrawShape && (
-              <Shape
-                svgProps={{
-                  className: _classNames.shapeStyles,
-                }}
-                pathProps={{ fill: xValue.color }}
-                shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}
-              />
-            )}
-            <div>
-              <div className={_classNames.calloutlegendText}> {xValue.legend}</div>
-              <div className={_classNames.calloutContentY}>
-                {convertToLocaleString(
-                  xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data,
-                  culture,
-                )}
+          {(yValueHoverSubCountsExists || calloutVariant === ChartHoverCardVariant.LongLegend) && (
+            <div className={this._classNames.calloutlegendText} style={{ marginBottom: '4px' }}>
+              {xValue.legend}
+            </div>
+          )}
+          <div id={`${index}_${xValue.y}`} className={this._classNames.calloutBlockContainer}>
+            <Shape
+              svgProps={{
+                className: this._classNames.shapeStyles,
+              }}
+              pathProps={{ fill: xValue.color }}
+              shape={Points[toDrawShape ? xValue.index! % Object.keys(pointTypes).length : 1] as LegendShape}
+            />
+            {!yValueHoverSubCountsExists && calloutVariant !== ChartHoverCardVariant.LongLegend && (
+              <div className={this._classNames.calloutlegendText} style={{ marginRight: '24px' }}>
+                {xValue.legend}
               </div>
+            )}
+            <div className={this._classNames.calloutContentY}>
+              {convertToLocaleString(
+                xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data,
+                culture,
+              )}
             </div>
           </div>
         </div>
@@ -635,16 +627,27 @@ export class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChar
     } else {
       const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };
       return (
-        <div style={marginStyle}>
-          <div className="ms-fontWeight-semibold" style={{ fontSize: '12pt' }}>
+        <div>
+          <div className={this._classNames.calloutContentX} style={{ marginBottom: '8px' }}>
             {xValue.legend!} ({yValue})
           </div>
-          {Object.keys(subcounts).map((subcountName: string) => {
+          {Object.keys(subcounts).map((subcountName: string, idx, sc) => {
             return (
-              <div key={subcountName} className={_classNames.calloutBlockContainer}>
-                <div className={_classNames.calloutlegendText}> {convertToLocaleString(subcountName, culture)}</div>
-                <div className={_classNames.calloutContentY}>
-                  {convertToLocaleString(subcounts[subcountName], culture)}
+              <div key={subcountName} style={idx + 1 === sc.length ? {} : { marginBottom: '8px' }}>
+                <div className={this._classNames.calloutlegendText} style={{ marginBottom: '4px' }}>
+                  {convertToLocaleString(subcountName, culture)}
+                </div>
+                <div className={this._classNames.calloutBlockContainer}>
+                  <Shape
+                    svgProps={{
+                      className: this._classNames.shapeStyles,
+                    }}
+                    pathProps={{ fill: xValue.color }}
+                    shape={Points[toDrawShape ? xValue.index! % Object.keys(pointTypes).length : 1] as LegendShape}
+                  />
+                  <div className={this._classNames.calloutContentY}>
+                    {convertToLocaleString(subcounts[subcountName], culture)}
+                  </div>
                 </div>
               </div>
             );
diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts b/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts
index ccc767b32e0ab..fdab05b3b6e94 100644
--- a/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts
+++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts
@@ -1,8 +1,8 @@
-import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react';
+import { FontSizes, FontWeights } from '@fluentui/react';
 import { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';
 
 export const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {
-  const { theme, chartValueSize, chartWidth, chartHeight, className, lineColor, toDrawShape } = props;
+  const { theme, chartValueSize, chartWidth, chartHeight, className } = props;
 
   return {
     root: [
@@ -58,85 +58,53 @@ export const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {
       width: chartWidth,
     },
 
-    calloutContentRoot: [
-      {
-        display: 'grid',
-        overflow: 'hidden',
-        padding: '11px 16px 10px 16px',
-        backgroundColor: theme.semanticColors.bodyBackground,
-        backgroundBlendMode: 'normal, luminosity',
-      },
-    ],
+    calloutContentRoot: {
+      ...theme.fonts.medium,
+      color: theme.semanticColors.bodyText,
+      padding: '16px',
+      backgroundColor: theme.semanticColors.bodyBackground,
+      backgroundBlendMode: 'normal, luminosity',
+    },
+
     calloutDateTimeContainer: {
+      marginBottom: '8px',
+    },
+
+    calloutContentX: {
+      fontWeight: FontWeights.semibold,
+    },
+
+    calloutBlockContainer: {
       display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
+      alignItems: 'center',
     },
-    calloutContentX: [
-      {
-        ...theme.fonts.small,
-        lineHeight: '16px',
-        opacity: '0.8',
-        color: theme.semanticColors.bodySubtext,
-      },
-    ],
-    calloutBlockContainer: [
-      theme.fonts.mediumPlus,
-      {
-        marginTop: '13px',
-        color: theme.semanticColors.bodyText,
-      },
-      !toDrawShape && {
-        selectors: {
-          [HighContrastSelector]: {
-            forcedColorAdjust: 'none',
-          },
-        },
-        borderLeft: `4px solid ${lineColor}`,
-        paddingLeft: '8px',
-      },
-      toDrawShape && {
-        display: 'flex',
-      },
-    ],
+
     shapeStyles: {
       marginRight: '8px',
+      flexShrink: 0,
     },
+
     calloutlegendText: {
-      ...theme.fonts.small,
-      lineHeight: '16px',
-      selectors: {
-        [HighContrastSelectorBlack]: {
-          color: 'rgb(255, 255, 255)',
-        },
-      },
-      color: theme.semanticColors.bodySubtext,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      flexGrow: 1,
+    },
+
+    calloutContentY: {
+      fontWeight: FontWeights.semibold,
+      flexShrink: 0,
+    },
+
+    divider: {
+      height: '1px',
+      backgroundColor: '#c8c8c8',
+      marginTop: '8px',
+      marginBottom: '8px',
+    },
+
+    descriptionMessage: {
+      fontSize: FontSizes.small,
     },
-    calloutContentY: [
-      {
-        ...theme.fonts.mediumPlus,
-        fontWeight: 'bold',
-        lineHeight: '22px',
-        selectors: {
-          [HighContrastSelectorBlack]: {
-            color: 'rgb(255, 255, 255)',
-          },
-        },
-      },
-    ],
-    descriptionMessage: [
-      theme.fonts.small,
-      {
-        selectors: {
-          [HighContrastSelectorBlack]: {
-            color: 'rgb(255, 255, 255)',
-          },
-        },
-        color: theme.semanticColors.bodyText,
-        marginTop: '10px',
-        paddingTop: '10px',
-        borderTop: `1px solid ${theme.semanticColors.menuDivider}`,
-      },
-    ],
   };
 };
diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts b/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts
index 49a1456494c4f..469251c683e7e 100644
--- a/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts
+++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts
@@ -3,6 +3,7 @@ import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { ILegendsProps } from '../Legends/index';
 import { IAccessibilityProps } from '../../types/index';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { ChartHoverCardVariant } from '../../utilities/index';
 
 export interface IGaugeChartSegment {
   /**
@@ -126,6 +127,12 @@ export interface IGaugeChartProps {
    * Props for the callout in the chart
    */
   calloutProps?: Partial<ICalloutProps>;
+
+  /**
+   * Specifies the variant of hover card to be rendered
+   * @defaultvalue ChartHoverCardVariant.ShortLegend
+   */
+  calloutVariant?: ChartHoverCardVariant;
 }
 
 export interface IGaugeChartStyleProps {
@@ -153,16 +160,6 @@ export interface IGaugeChartStyleProps {
    * Additional CSS class(es) to apply to the chart
    */
   className?: string;
-
-  /**
-   * Color of the line
-   */
-  lineColor?: string;
-
-  /**
-   * Boolean flag which determines if shape is drawn in callout
-   */
-  toDrawShape?: boolean;
 }
 
 export interface IGaugeChartStyles {
@@ -255,4 +252,9 @@ export interface IGaugeChartStyles {
    * Styles for the shape object in the callout
    */
   shapeStyles?: IStyle;
+
+  /**
+   * Styles for the group divider in callout
+   */
+  divider?: IStyle;
 }
diff --git a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
index e460dbf1020bc..74122d81236d6 100644
--- a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
+++ b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
@@ -533,37 +533,32 @@ exports[`GaugeChart - event listeners testing should show a callout when the mou
             class=
 
                 {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
                   background-blend-mode: normal, luminosity;
                   background-color: #ffffff;
-                  display: grid;
-                  overflow: hidden;
-                  padding-bottom: 10px;
+                  color: #323130;
+                  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;
+                  padding-bottom: 16px;
                   padding-left: 16px;
                   padding-right: 16px;
-                  padding-top: 11px;
+                  padding-top: 16px;
                 }
           >
             <div
               class=
 
                   {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-between;
+                    margin-bottom: 8px;
                   }
             >
               <div
                 class=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      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: 0.8;
+                      font-weight: 600;
                     }
                 data-is-focusable="false"
                 role="text"
@@ -575,64 +570,57 @@ exports[`GaugeChart - event listeners testing should show a callout when the mou
               <div
                 data-is-focusable="false"
                 role="text"
+                style="padding-left: 0px; padding-right: 0px; margin-bottom: 8px;"
               >
                 <div>
                   <div
                     class=
 
                         {
-                          -moz-osx-font-smoothing: grayscale;
-                          -webkit-font-smoothing: antialiased;
-                          border-left: 4px solid #107c10;
-                          color: #323130;
-                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                          font-size: 16px;
-                          font-weight: 400;
-                          margin-top: 13px;
-                          padding-left: 8px;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                          forced-color-adjust: none;
+                          align-items: center;
+                          display: flex;
                         }
                     id="0_0 - 33"
                   >
-                    <div>
-                      <div
-                        class=
+                    <svg
+                      class=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #605e5c;
-                              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;
-                            }
-                            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                              color: rgb(255, 255, 255);
-                            }
-                      >
-                         
-                        Low Risk
-                      </div>
-                      <div
-                        class=
+                          {
+                            flex-shrink: 0;
+                            margin-right: 8px;
+                          }
+                      height="14"
+                      transform="rotate(0, 0, 0)"
+                      viewBox="-1 -1 14 14"
+                      width="14"
+                    >
+                      <path
+                        d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                        fill="#107c10"
+                      />
+                    </svg>
+                    <div
+                      class=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 16px;
-                              font-weight: bold;
-                              line-height: 22px;
-                            }
-                            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                              color: rgb(255, 255, 255);
-                            }
-                      >
-                        0 - 33
-                      </div>
+                          {
+                            flex-grow: 1;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                          }
+                      style="margin-right: 24px;"
+                    >
+                      Low Risk
+                    </div>
+                    <div
+                      class=
+
+                          {
+                            flex-shrink: 0;
+                            font-weight: 600;
+                          }
+                    >
+                      0 - 33
                     </div>
                   </div>
                 </div>
@@ -640,64 +628,57 @@ exports[`GaugeChart - event listeners testing should show a callout when the mou
               <div
                 data-is-focusable="false"
                 role="text"
+                style="padding-left: 0px; padding-right: 0px; margin-bottom: 8px;"
               >
                 <div>
                   <div
                     class=
 
                         {
-                          -moz-osx-font-smoothing: grayscale;
-                          -webkit-font-smoothing: antialiased;
-                          border-left: 4px solid #f7630c;
-                          color: #323130;
-                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                          font-size: 16px;
-                          font-weight: 400;
-                          margin-top: 13px;
-                          padding-left: 8px;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                          forced-color-adjust: none;
+                          align-items: center;
+                          display: flex;
                         }
                     id="1_34 - 67"
                   >
-                    <div>
-                      <div
-                        class=
+                    <svg
+                      class=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #605e5c;
-                              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;
-                            }
-                            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                              color: rgb(255, 255, 255);
-                            }
-                      >
-                         
-                        Medium Risk
-                      </div>
-                      <div
-                        class=
+                          {
+                            flex-shrink: 0;
+                            margin-right: 8px;
+                          }
+                      height="14"
+                      transform="rotate(0, 0, 0)"
+                      viewBox="-1 -1 14 14"
+                      width="14"
+                    >
+                      <path
+                        d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                        fill="#f7630c"
+                      />
+                    </svg>
+                    <div
+                      class=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 16px;
-                              font-weight: bold;
-                              line-height: 22px;
-                            }
-                            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                              color: rgb(255, 255, 255);
-                            }
-                      >
-                        34 - 67
-                      </div>
+                          {
+                            flex-grow: 1;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                          }
+                      style="margin-right: 24px;"
+                    >
+                      Medium Risk
+                    </div>
+                    <div
+                      class=
+
+                          {
+                            flex-shrink: 0;
+                            font-weight: 600;
+                          }
+                    >
+                      34 - 67
                     </div>
                   </div>
                 </div>
@@ -705,64 +686,57 @@ exports[`GaugeChart - event listeners testing should show a callout when the mou
               <div
                 data-is-focusable="false"
                 role="text"
+                style="padding-left: 0px; padding-right: 0px; margin-bottom: 0px;"
               >
                 <div>
                   <div
                     class=
 
                         {
-                          -moz-osx-font-smoothing: grayscale;
-                          -webkit-font-smoothing: antialiased;
-                          border-left: 4px solid #c50f1f;
-                          color: #323130;
-                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                          font-size: 16px;
-                          font-weight: 400;
-                          margin-top: 13px;
-                          padding-left: 8px;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                          forced-color-adjust: none;
+                          align-items: center;
+                          display: flex;
                         }
                     id="2_68 - 100"
                   >
-                    <div>
-                      <div
-                        class=
+                    <svg
+                      class=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #605e5c;
-                              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;
-                            }
-                            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                              color: rgb(255, 255, 255);
-                            }
-                      >
-                         
-                        High Risk
-                      </div>
-                      <div
-                        class=
+                          {
+                            flex-shrink: 0;
+                            margin-right: 8px;
+                          }
+                      height="14"
+                      transform="rotate(0, 0, 0)"
+                      viewBox="-1 -1 14 14"
+                      width="14"
+                    >
+                      <path
+                        d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                        fill="#c50f1f"
+                      />
+                    </svg>
+                    <div
+                      class=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 16px;
-                              font-weight: bold;
-                              line-height: 22px;
-                            }
-                            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                              color: rgb(255, 255, 255);
-                            }
-                      >
-                        68 - 100
-                      </div>
+                          {
+                            flex-grow: 1;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                          }
+                      style="margin-right: 24px;"
+                    >
+                      High Risk
+                    </div>
+                    <div
+                      class=
+
+                          {
+                            flex-shrink: 0;
+                            font-weight: 600;
+                          }
+                    >
+                      68 - 100
                     </div>
                   </div>
                 </div>
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
index eccc78c98f254..b04ec3684f852 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
@@ -660,85 +660,73 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
                
             </div>
           </div>
           <div
-            className=""
+            className=
+
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #0078d4;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: unset;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
-              <div
+              <svg
                 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;
+                      flex-shrink: 0;
+                      margin-right: 8px;
                     }
-              />
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
+              >
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="#0078d4"
+                />
+              </svg>
               <div
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #0078d4;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 66
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap
index 3bd8ef6e150d3..0c01964f4d971 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap
@@ -1202,85 +1202,73 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
                
             </div>
           </div>
           <div
-            className=""
+            className=
+
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #0078d4;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: unset;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
-              <div
+              <svg
                 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;
+                      flex-shrink: 0;
+                      margin-right: 8px;
                     }
-              />
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
+              >
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="#0078d4"
+                />
+              </svg>
               <div
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #0078d4;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 66
diff --git a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
index 78a1e9731e086..d157723e2d737 100644
--- a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
@@ -408,144 +408,120 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
+              Execllent (0-200)
                
             </div>
           </div>
           <div
             className=
 
-                {
-                  align-items: flex-end;
-                  display: flex;
-                }
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid rgb(159, 198, 222);
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: unset;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
-              <div
+              <svg
                 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;
+                      flex-shrink: 0;
+                      margin-right: 8px;
                     }
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
               >
-                Execllent (0-200)
-              </div>
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="rgb(159, 198, 222)"
+                />
+              </svg>
               <div
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: rgb(159, 198, 222);
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 50
               </div>
-            </div>
-            <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;
-                    margin-left: 6px;
-                  }
-            >
-              <span
+              <div
                 className=
 
                     {
-                      font-weight: 700;
+                      flex-shrink: 0;
+                      margin-left: 24px;
                     }
               >
-                50
-              </span>
-              /
-              <span
-                className=
+                <span
+                  className=
 
-                    {
-                      font-weight: 600;
-                    }
-              >
-                2,391
-              </span>
+                      {
+                        font-weight: 600;
+                      }
+                >
+                  50
+                </span>
+                <span
+                  className=
+
+
+                >
+                   / 2,391
+                </span>
+              </div>
             </div>
           </div>
           <div
             className=
 
                 {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  border-top: 1px solid #c8c6c4;
-                  color: #323130;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  background-color: #c8c8c8;
+                  height: 1px;
+                  margin-bottom: 8px;
+                  margin-top: 8px;
+                }
+          />
+          <div
+            className=
+
+                {
                   font-size: 12px;
-                  font-weight: 400;
-                  margin-top: 10px;
-                  padding-top: 10px;
                 }
           >
             a good day to start with in Texas with best air quality
diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index 495795292a967..a7a8a8c097598 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -416,87 +416,74 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
+              2020/04/30
                
             </div>
           </div>
           <div
-            className=""
+            className=
+
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #5c2d91;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: unset;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
-              <div
+              <svg
                 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;
+                      flex-shrink: 0;
+                      margin-right: 8px;
                     }
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
               >
-                2020/04/30
-              </div>
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="#5c2d91"
+                />
+              </svg>
               <div
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #5c2d91;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 19%
diff --git a/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap
index 047636d3e3e73..f537640fa736f 100644
--- a/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap
+++ b/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap
@@ -1087,37 +1087,32 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
               37%
@@ -1125,35 +1120,45 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct
             </div>
           </div>
           <div
-            className=""
+            className=
+
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #00188f;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: 13px;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
+              <svg
+                className=
+
+                    {
+                      flex-shrink: 0;
+                      margin-right: 8px;
+                    }
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
+              >
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="#00188f"
+                />
+              </svg>
               <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;
+                      flex-grow: 1;
+                      margin-bottom: 0px;
+                      margin-right: 24px;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
                     }
               >
                 Apples
@@ -1162,13 +1167,8 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #00188f;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 2020/04/30
diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
index 5bfa9e1a48c8d..7ddf80b13278a 100644
--- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
+++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
@@ -405,38 +405,32 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
-            style={Object {}}
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
               data-is-focusable={false}
               role="text"
@@ -449,69 +443,68 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
           >
             <div
               data-is-focusable={false}
-              key="callout-content-0"
               role="text"
-              style={Object {}}
+              style={
+                Object {
+                  "marginBottom": "0px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
             >
-              <div
-                style={Object {}}
-              >
+              <div>
                 <div
                   className=
 
                       {
-                        -moz-osx-font-smoothing: grayscale;
-                        -webkit-font-smoothing: antialiased;
-                        border-left: 4px solid red;
-                        color: #323130;
-                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                        font-size: 16px;
-                        font-weight: 400;
-                        margin-top: 13px;
-                        padding-left: 8px;
-                      }
-                      @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                        forced-color-adjust: none;
+                        align-items: center;
+                        display: flex;
                       }
                   id="0_50"
                 >
-                  <div>
-                    <div
-                      className=
+                  <svg
+                    className=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #605e5c;
-                            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;
-                          }
-                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                            color: rgb(255, 255, 255);
-                          }
-                    >
-                       
-                      metaData1
-                    </div>
-                    <div
-                      className=
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="red"
+                    />
+                  </svg>
+                  <div
+                    className=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 16px;
-                            font-weight: bold;
-                            line-height: 22px;
-                          }
-                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                            color: rgb(255, 255, 255);
-                          }
-                    >
-                      50
-                    </div>
+                        {
+                          flex-grow: 1;
+                          overflow: hidden;
+                          text-overflow: ellipsis;
+                          white-space: nowrap;
+                        }
+                    style={
+                      Object {
+                        "marginRight": "24px",
+                      }
+                    }
+                  >
+                    metaData1
+                  </div>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    50
                   </div>
                 </div>
               </div>
diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap
index 1e8b8514ba0ac..08d8b0ad218d7 100644
--- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap
@@ -721,38 +721,32 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
-            style={Object {}}
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
               data-is-focusable={false}
               role="text"
@@ -765,69 +759,68 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
           >
             <div
               data-is-focusable={false}
-              key="callout-content-0"
               role="text"
-              style={Object {}}
+              style={
+                Object {
+                  "marginBottom": "0px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
             >
-              <div
-                style={Object {}}
-              >
+              <div>
                 <div
                   className=
 
                       {
-                        -moz-osx-font-smoothing: grayscale;
-                        -webkit-font-smoothing: antialiased;
-                        border-left: 4px solid red;
-                        color: #323130;
-                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                        font-size: 16px;
-                        font-weight: 400;
-                        margin-top: 13px;
-                        padding-left: 8px;
-                      }
-                      @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                        forced-color-adjust: none;
+                        align-items: center;
+                        display: flex;
                       }
                   id="0_50"
                 >
-                  <div>
-                    <div
-                      className=
+                  <svg
+                    className=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #605e5c;
-                            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;
-                          }
-                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                            color: rgb(255, 255, 255);
-                          }
-                    >
-                       
-                      metaData1
-                    </div>
-                    <div
-                      className=
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="red"
+                    />
+                  </svg>
+                  <div
+                    className=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 16px;
-                            font-weight: bold;
-                            line-height: 22px;
-                          }
-                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                            color: rgb(255, 255, 255);
-                          }
-                    >
-                      50
-                    </div>
+                        {
+                          flex-grow: 1;
+                          overflow: hidden;
+                          text-overflow: ellipsis;
+                          white-space: nowrap;
+                        }
+                    style={
+                      Object {
+                        "marginRight": "24px",
+                      }
+                    }
+                  >
+                    metaData1
+                  </div>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    50
                   </div>
                 </div>
               </div>
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
index 5d9bc64f1b2a5..17a95493e822e 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
@@ -570,87 +570,74 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
+              2020/04/30
                
             </div>
           </div>
           <div
-            className=""
+            className=
+
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #e81123;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: unset;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
-              <div
+              <svg
                 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;
+                      flex-shrink: 0;
+                      margin-right: 8px;
                     }
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
               >
-                2020/04/30
-              </div>
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="#e81123"
+                />
+              </svg>
               <div
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #e81123;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 40%
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
index 2b3a46ccbecef..b707bbdaf12f1 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
@@ -275,87 +275,74 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
                 className=
 
                     {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
                       background-blend-mode: normal, luminosity;
                       background-color: #ffffff;
-                      display: grid;
-                      overflow: hidden;
-                      padding-bottom: 10px;
+                      color: #323130;
+                      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;
+                      padding-bottom: 16px;
                       padding-left: 16px;
                       padding-right: 16px;
-                      padding-top: 11px;
+                      padding-top: 16px;
                     }
               >
                 <div
                   className=
 
                       {
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: space-between;
+                        margin-bottom: 8px;
                       }
                 >
                   <div
                     className=
 
                         {
-                          -moz-osx-font-smoothing: grayscale;
-                          -webkit-font-smoothing: antialiased;
-                          color: #605e5c;
-                          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: 0.8;
+                          font-weight: 600;
                         }
                   >
+                    first Lorem ipsum dolor sit amet
                      
                   </div>
                 </div>
                 <div
-                  className=""
+                  className=
+
+
                 >
                   <div
                     className=
 
                         {
-                          -moz-osx-font-smoothing: grayscale;
-                          -webkit-font-smoothing: antialiased;
-                          border-left: 4px solid #5c005c;
-                          color: #323130;
-                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                          font-size: 28px;
-                          font-weight: 600;
-                          line-height: 22px;
-                          margin-top: unset;
-                          padding-left: 8px;
+                          align-items: center;
+                          display: flex;
                         }
                   >
-                    <div
+                    <svg
                       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;
+                            flex-shrink: 0;
+                            margin-right: 8px;
                           }
+                      height={14}
+                      transform="rotate(0, 0, 0)"
+                      viewBox="-1 -1 14 14"
+                      width={14}
                     >
-                      first Lorem ipsum dolor sit amet
-                    </div>
+                      <path
+                        d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                        fill="#5c005c"
+                      />
+                    </svg>
                     <div
                       className=
 
                           {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #5c005c;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 28px;
-                            font-weight: bold;
-                            line-height: 36px;
+                            flex-shrink: 0;
+                            font-weight: 600;
                           }
                     >
                       40
diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
index 828e8962dccc6..c6c558ee13c2e 100644
--- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
@@ -615,37 +615,32 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
               2020/04/30
@@ -653,35 +648,45 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             </div>
           </div>
           <div
-            className=""
+            className=
+
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #002050;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: 13px;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
+              <svg
+                className=
+
+                    {
+                      flex-shrink: 0;
+                      margin-right: 8px;
+                    }
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
+              >
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="#002050"
+                />
+              </svg>
               <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;
+                      flex-grow: 1;
+                      margin-bottom: 0px;
+                      margin-right: 24px;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
                     }
               >
                 Second
@@ -690,13 +695,8 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #002050;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 20%
diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap
index 7ddc5bc624d93..64d195b98fb12 100644
--- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap
@@ -3263,37 +3263,32 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
               2020/04/30
@@ -3301,35 +3296,45 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             </div>
           </div>
           <div
-            className=""
+            className=
+
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #002050;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: 13px;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
+              <svg
+                className=
+
+                    {
+                      flex-shrink: 0;
+                      margin-right: 8px;
+                    }
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
+              >
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="#002050"
+                />
+              </svg>
               <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;
+                      flex-grow: 1;
+                      margin-bottom: 0px;
+                      margin-right: 24px;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
                     }
               >
                 Second
@@ -3338,13 +3343,8 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #002050;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 20%
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
index a91183d816c10..b434b6d600632 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
@@ -9,6 +9,7 @@ import {
   IVerticalStackedBarChartProps,
   VerticalStackedBarChart,
   IVerticalStackedChartProps,
+  ChartHoverCardVariant,
 } from '../../index';
 import { IVerticalStackedBarChartState, VerticalStackedBarChartBase } from './VerticalStackedBarChart.base';
 import toJson from 'enzyme-to-json';
@@ -320,6 +321,25 @@ describe('VerticalStackedBarChart - mouse events', () => {
     const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
+
+  it('Should render long legend variant of callout correctly on mouseover', async () => {
+    wrapper = mount(
+      <VerticalStackedBarChart
+        data={chartPoints2}
+        calloutProps={{ doNotLayer: true }}
+        calloutVariant={ChartHoverCardVariant.LongLegend}
+        enabledLegendsWrapLines
+      />,
+    );
+
+    // Wait for the chart to be resized
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+
+    wrapper.find('rect').at(0).simulate('mouseover');
+    const tree = toJson(wrapper, { mode: 'deep' });
+    expect(tree).toMatchSnapshot();
+  });
 });
 
 describe('Render empty chart aria label div when chart is empty', () => {
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
index d2915a27babcf..0516a409ee530 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
@@ -554,37 +554,32 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
               2020/04/30
@@ -592,35 +587,45 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
             </div>
           </div>
           <div
-            className=""
+            className=
+
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #0078d4;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: 13px;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
+              <svg
+                className=
+
+                    {
+                      flex-shrink: 0;
+                      margin-right: 8px;
+                    }
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
+              >
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="#0078d4"
+                />
+              </svg>
               <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;
+                      flex-grow: 1;
+                      margin-bottom: 0px;
+                      margin-right: 24px;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
                     }
               >
                 Metadata1
@@ -629,13 +634,8 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #0078d4;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 40%
@@ -1914,6 +1914,928 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
 </div>
 `;
 
+exports[`VerticalStackedBarChart - mouse events Should render long legend variant of callout correctly on mouseover 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_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      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: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <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: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0true"
+        >
+          <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%. Line1, 15."
+            data-is-focusable={true}
+            id="0-singleBar"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          >
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#0078d4"
+              height={196.15384615384616}
+              key="0"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={78.84615384615384}
+            />
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#00188f"
+              height={24.51923076923077}
+              key="1"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={54.326923076923066}
+            />
+          </g>
+          <text
+            aria-label="Total: 45"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={56}
+            y={48.326923076923066}
+          >
+            45
+          </text>
+        </g>
+        <g
+          key="1true"
+        >
+          <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%. Line1, 30."
+            data-is-focusable={true}
+            id="1-singleBar"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          >
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#0078d4"
+              height={147.1153846153846}
+              key="1"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={127.88461538461539}
+            />
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#00188f"
+              height={98.07692307692308}
+              key="2"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={29.807692307692307}
+            />
+          </g>
+          <text
+            aria-label="Total: 50"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={-36}
+            y={23.807692307692307}
+          >
+            50
+          </text>
+        </g>
+      </g>
+      <g>
+        <line
+          key="0-1-line"
+          opacity={1}
+          stroke="#ffb900"
+          strokeLinecap="round"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          x1={56}
+          x2={-36}
+          y1={201.4423076923077}
+          y2={127.88461538461539}
+        />
+        <circle
+          cx={56}
+          cy={201.4423076923077}
+          fill="#ffffff"
+          key="0-0-dot"
+          onMouseOver={[Function]}
+          r={8}
+          stroke="#ffb900"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          visibility="visibility"
+        />
+        <circle
+          cx={-36}
+          cy={127.88461538461539}
+          fill="#ffffff"
+          key="0-1-dot"
+          onMouseOver={[Function]}
+          r={8}
+          stroke="#ffb900"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          visibility="hidden"
+        />
+      </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
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone5"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="Line1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={3}
+              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;
+                    text-transform: capitalize;
+                  }
+                  &::-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), screen and (forced-colors: 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: #ffb900;
+                      border-color: #ffb900;
+                      border: 1px solid;
+                      content: ;
+                      height: 4px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #ffb900, #ffb900);
+                      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: ;
+                    }
+              >
+                Line1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="1"
+            role="none"
+          >
+            <button
+              aria-label="Metadata1"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={3}
+              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;
+                    text-transform: capitalize;
+                  }
+                  &::-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), screen and (forced-colors: 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;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: 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;
+                }
+            key="2"
+            role="none"
+          >
+            <button
+              aria-label="Metadata2"
+              aria-posinset={3}
+              aria-selected={false}
+              aria-setsize={3}
+              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;
+                    text-transform: capitalize;
+                  }
+                  &::-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), screen and (forced-colors: 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;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: 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
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            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;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 16px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  margin-bottom: 8px;
+                }
+          >
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+              data-is-focusable={false}
+              role="text"
+            >
+              0
+            </div>
+          </div>
+          <div
+            style={Object {}}
+          >
+            <div
+              data-is-focusable={false}
+              role="text"
+              style={
+                Object {
+                  "marginBottom": "8px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
+            >
+              <div>
+                <div
+                  className=
+
+                      {
+                        flex-grow: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      }
+                  style={
+                    Object {
+                      "marginBottom": "4px",
+                    }
+                  }
+                >
+                  Line1
+                </div>
+                <div
+                  className=
+
+                      {
+                        align-items: center;
+                        display: flex;
+                      }
+                  id="0_15"
+                >
+                  <svg
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="#ffb900"
+                    />
+                  </svg>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    15
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className=
+
+                  {
+                    background-color: #c8c8c8;
+                    height: 1px;
+                    margin-bottom: 8px;
+                    margin-top: 8px;
+                  }
+            />
+            <div
+              data-is-focusable={false}
+              role="text"
+              style={
+                Object {
+                  "marginBottom": "8px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
+            >
+              <div>
+                <div
+                  className=
+
+                      {
+                        flex-grow: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      }
+                  style={
+                    Object {
+                      "marginBottom": "4px",
+                    }
+                  }
+                >
+                  Metadata2
+                </div>
+                <div
+                  className=
+
+                      {
+                        align-items: center;
+                        display: flex;
+                      }
+                  id="1_undefined"
+                >
+                  <svg
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="#00188f"
+                    />
+                  </svg>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    5%
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              data-is-focusable={false}
+              role="text"
+              style={
+                Object {
+                  "marginBottom": "0px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
+            >
+              <div>
+                <div
+                  className=
+
+                      {
+                        flex-grow: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      }
+                  style={
+                    Object {
+                      "marginBottom": "4px",
+                    }
+                  }
+                >
+                  Metadata1
+                </div>
+                <div
+                  className=
+
+                      {
+                        align-items: center;
+                        display: flex;
+                      }
+                  id="2_undefined"
+                >
+                  <svg
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="#0078d4"
+                    />
+                  </svg>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    40%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1`] = `
 <div
   className=
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap
index 2701e910e20c2..7b93d2cb31954 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap
@@ -900,37 +900,32 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
           className=
 
               {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
                 background-blend-mode: normal, luminosity;
                 background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
                 padding-left: 16px;
                 padding-right: 16px;
-                padding-top: 11px;
+                padding-top: 16px;
               }
         >
           <div
             className=
 
                 {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
+                  margin-bottom: 8px;
                 }
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    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: 0.8;
+                    font-weight: 600;
                   }
             >
               2020/04/30
@@ -938,35 +933,45 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
             </div>
           </div>
           <div
-            className=""
+            className=
+
+
           >
             <div
               className=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #0078d4;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: 13px;
-                    padding-left: 8px;
+                    align-items: center;
+                    display: flex;
                   }
             >
+              <svg
+                className=
+
+                    {
+                      flex-shrink: 0;
+                      margin-right: 8px;
+                    }
+                height={14}
+                transform="rotate(0, 0, 0)"
+                viewBox="-1 -1 14 14"
+                width={14}
+              >
+                <path
+                  d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                  fill="#0078d4"
+                />
+              </svg>
               <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;
+                      flex-grow: 1;
+                      margin-bottom: 0px;
+                      margin-right: 24px;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
                     }
               >
                 Metadata1
@@ -975,13 +980,8 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
                 className=
 
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #0078d4;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      flex-shrink: 0;
+                      font-weight: 600;
                     }
               >
                 40%
@@ -2260,6 +2260,928 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
 </div>
 `;
 
+exports[`VerticalStackedBarChart - mouse events Should render long legend variant of callout correctly on mouseover 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_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      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: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <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: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0true"
+        >
+          <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%. Line1, 15."
+            data-is-focusable={true}
+            id="0-singleBar"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          >
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#0078d4"
+              height={196.15384615384616}
+              key="0"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={78.84615384615384}
+            />
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#00188f"
+              height={24.51923076923077}
+              key="1"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={54.326923076923066}
+            />
+          </g>
+          <text
+            aria-label="Total: 45"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={56}
+            y={48.326923076923066}
+          >
+            45
+          </text>
+        </g>
+        <g
+          key="1true"
+        >
+          <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%. Line1, 30."
+            data-is-focusable={true}
+            id="1-singleBar"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          >
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#0078d4"
+              height={147.1153846153846}
+              key="1"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={127.88461538461539}
+            />
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#00188f"
+              height={98.07692307692308}
+              key="2"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={29.807692307692307}
+            />
+          </g>
+          <text
+            aria-label="Total: 50"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={-36}
+            y={23.807692307692307}
+          >
+            50
+          </text>
+        </g>
+      </g>
+      <g>
+        <line
+          key="0-1-line"
+          opacity={1}
+          stroke="#ffb900"
+          strokeLinecap="round"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          x1={56}
+          x2={-36}
+          y1={201.4423076923077}
+          y2={127.88461538461539}
+        />
+        <circle
+          cx={56}
+          cy={201.4423076923077}
+          fill="#ffffff"
+          key="0-0-dot"
+          onMouseOver={[Function]}
+          r={8}
+          stroke="#ffb900"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          visibility="visibility"
+        />
+        <circle
+          cx={-36}
+          cy={127.88461538461539}
+          fill="#ffffff"
+          key="0-1-dot"
+          onMouseOver={[Function]}
+          r={8}
+          stroke="#ffb900"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          visibility="hidden"
+        />
+      </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
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone5"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="Line1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={3}
+              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;
+                    text-transform: capitalize;
+                  }
+                  &::-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), screen and (forced-colors: 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: #ffb900;
+                      border-color: #ffb900;
+                      border: 1px solid;
+                      content: ;
+                      height: 4px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #ffb900, #ffb900);
+                      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: ;
+                    }
+              >
+                Line1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="1"
+            role="none"
+          >
+            <button
+              aria-label="Metadata1"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={3}
+              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;
+                    text-transform: capitalize;
+                  }
+                  &::-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), screen and (forced-colors: 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;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: 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;
+                }
+            key="2"
+            role="none"
+          >
+            <button
+              aria-label="Metadata2"
+              aria-posinset={3}
+              aria-selected={false}
+              aria-setsize={3}
+              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;
+                    text-transform: capitalize;
+                  }
+                  &::-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), screen and (forced-colors: 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;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: 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
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            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;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                color: #323130;
+                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;
+                padding-bottom: 16px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 16px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  margin-bottom: 8px;
+                }
+          >
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+              data-is-focusable={false}
+              role="text"
+            >
+              0
+            </div>
+          </div>
+          <div
+            style={Object {}}
+          >
+            <div
+              data-is-focusable={false}
+              role="text"
+              style={
+                Object {
+                  "marginBottom": "8px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
+            >
+              <div>
+                <div
+                  className=
+
+                      {
+                        flex-grow: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      }
+                  style={
+                    Object {
+                      "marginBottom": "4px",
+                    }
+                  }
+                >
+                  Line1
+                </div>
+                <div
+                  className=
+
+                      {
+                        align-items: center;
+                        display: flex;
+                      }
+                  id="0_15"
+                >
+                  <svg
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="#ffb900"
+                    />
+                  </svg>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    15
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className=
+
+                  {
+                    background-color: #c8c8c8;
+                    height: 1px;
+                    margin-bottom: 8px;
+                    margin-top: 8px;
+                  }
+            />
+            <div
+              data-is-focusable={false}
+              role="text"
+              style={
+                Object {
+                  "marginBottom": "8px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
+            >
+              <div>
+                <div
+                  className=
+
+                      {
+                        flex-grow: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      }
+                  style={
+                    Object {
+                      "marginBottom": "4px",
+                    }
+                  }
+                >
+                  Metadata2
+                </div>
+                <div
+                  className=
+
+                      {
+                        align-items: center;
+                        display: flex;
+                      }
+                  id="1_undefined"
+                >
+                  <svg
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="#00188f"
+                    />
+                  </svg>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    5%
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              data-is-focusable={false}
+              role="text"
+              style={
+                Object {
+                  "marginBottom": "0px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
+            >
+              <div>
+                <div
+                  className=
+
+                      {
+                        flex-grow: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      }
+                  style={
+                    Object {
+                      "marginBottom": "4px",
+                    }
+                  }
+                >
+                  Metadata1
+                </div>
+                <div
+                  className=
+
+                      {
+                        align-items: center;
+                        display: flex;
+                      }
+                  id="2_undefined"
+                >
+                  <svg
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="#0078d4"
+                    />
+                  </svg>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    40%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1`] = `
 <div
   className=
diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx
index 1308a3c325b00..bdad69518b98e 100644
--- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx
+++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx
@@ -1,41 +1,63 @@
 import * as React from 'react';
-import { IChartHoverCardStyles, IChartHoverCardStyleProps, IChartHoverCardProps } from './ChartHoverCard.types';
+import {
+  IChartHoverCardStyles,
+  IChartHoverCardStyleProps,
+  IChartHoverCardProps,
+  ChartHoverCardVariant,
+} from './ChartHoverCard.types';
 import { classNamesFunction, IProcessedStyleSet } from '@fluentui/react';
-import { convertToLocaleString } from '../index';
+import { convertToLocaleString, Points } from '../../utilities/index';
+import { LegendShape, Shape } from '../../components/Legends/index';
 
 const getClassNames = classNamesFunction<IChartHoverCardStyleProps, IChartHoverCardStyles>();
+
 export class ChartHoverCardBase extends React.Component<IChartHoverCardProps, {}> {
   private _classNames: IProcessedStyleSet<IChartHoverCardStyles>;
+
   public render(): React.ReactNode {
-    const { color, Legend, XValue, YValue, styles, theme, ratio, descriptionMessage, culture } = this.props;
+    const { color, Legend, XValue, YValue, styles, theme, ratio, descriptionMessage, culture, variant } = this.props;
+
     this._classNames = getClassNames(styles!, {
       theme: theme!,
-      color: color,
-      XValue: XValue,
-      isRatioPresent: !!ratio,
+      variant,
+      hasBothMetrics: !!YValue && !!ratio,
     });
+
     return (
       <div className={this._classNames.calloutContentRoot}>
         <div className={this._classNames.calloutDateTimeContainer}>
-          <div className={this._classNames.calloutContentX}>{XValue} </div>
-          {/*TO DO  if we add time for callout then will use this */}
-          {/* <div className={this._classNames.calloutContentX}>07:00am</div> */}
+          <div className={this._classNames.calloutContentX}>{XValue || convertToLocaleString(Legend, culture)} </div>
         </div>
         <div className={this._classNames.calloutInfoContainer}>
-          <div className={this._classNames.calloutBlockContainer}>
+          {variant === ChartHoverCardVariant.LongLegend && !!XValue && !!Legend && (
             <div className={this._classNames.calloutlegendText}>{convertToLocaleString(Legend, culture)}</div>
+          )}
+          <div className={this._classNames.calloutBlockContainer}>
+            <Shape
+              svgProps={{
+                className: this._classNames.calloutLegendIcon,
+              }}
+              pathProps={{ fill: color }}
+              shape={Points[1] as LegendShape}
+            />
+            {variant !== ChartHoverCardVariant.LongLegend && !!XValue && !!Legend && (
+              <div className={this._classNames.calloutlegendText}>{convertToLocaleString(Legend, culture)}</div>
+            )}
             <div className={this._classNames.calloutContentY}>{convertToLocaleString(YValue, culture)}</div>
+            {!!ratio && (
+              <div className={this._classNames.ratio}>
+                <span className={this._classNames.numerator}>{convertToLocaleString(ratio[0], culture)}</span>
+                <span className={this._classNames.denominator}>{' / ' + convertToLocaleString(ratio[1], culture)}</span>
+              </div>
+            )}
           </div>
-          {!!ratio && (
-            <div className={this._classNames.ratio}>
-              <>
-                <span className={this._classNames.numerator}>{convertToLocaleString(ratio[0], culture)}</span>/
-                <span className={this._classNames.denominator}>{convertToLocaleString(ratio[1], culture)}</span>
-              </>
-            </div>
-          )}
         </div>
-        {!!descriptionMessage && <div className={this._classNames.descriptionMessage}>{descriptionMessage}</div>}
+        {!!descriptionMessage && (
+          <>
+            <div className={this._classNames.divider} />
+            <div className={this._classNames.descriptionMessage}>{descriptionMessage}</div>
+          </>
+        )}
       </div>
     );
   }
diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts
index 16918a422ccba..2b61595d98a3f 100644
--- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts
+++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts
@@ -1,83 +1,71 @@
-import { IChartHoverCardStyles, IChartHoverCardStyleProps } from './ChartHoverCard.types';
-import { FontWeights } from '@fluentui/react/lib/Styling';
+import { IChartHoverCardStyles, IChartHoverCardStyleProps, ChartHoverCardVariant } from './ChartHoverCard.types';
+import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';
 
 export const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChartHoverCardStyles => {
-  const { color, XValue, theme, isRatioPresent = false } = props;
+  const { theme, variant, hasBothMetrics } = props;
   return {
-    calloutContentRoot: [
-      {
-        display: 'grid',
-        overflow: 'hidden',
-        padding: '11px 16px 10px 16px',
-        backgroundColor: theme.semanticColors.bodyBackground,
-        backgroundBlendMode: 'normal, luminosity',
-      },
-    ],
+    calloutContentRoot: {
+      ...theme.fonts.medium,
+      color: theme.semanticColors.bodyText,
+      padding: '16px',
+      backgroundColor: theme.semanticColors.bodyBackground,
+      backgroundBlendMode: 'normal, luminosity',
+    },
+
     calloutDateTimeContainer: {
+      marginBottom: '8px',
+    },
+
+    calloutContentX: {
+      fontWeight: FontWeights.semibold,
+    },
+
+    calloutBlockContainer: {
       display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
+      alignItems: 'center',
     },
-    calloutContentX: [
-      theme.fonts.small,
-      {
-        lineHeight: '16px',
-        opacity: '0.8',
-        color: theme.semanticColors.bodySubtext,
-      },
-    ],
-    calloutBlockContainer: [
-      theme.fonts.xxLarge,
-      {
-        marginTop: XValue ? '13px' : 'unset',
-        paddingLeft: '8px',
-        lineHeight: '22px',
-        color: theme.semanticColors.bodyText,
-        borderLeft: `4px solid ${color}`,
-      },
-    ],
-    calloutlegendText: [
-      theme.fonts.small,
-      {
-        lineHeight: '16px',
-        color: theme.semanticColors.bodyText,
-      },
-    ],
-    calloutContentY: [
-      theme.fonts.xxLarge,
-      {
-        color: color ? color : theme.semanticColors.bodyText,
-        fontWeight: 'bold',
-        lineHeight: '36px',
-      },
-    ],
-    calloutInfoContainer: [
-      isRatioPresent && {
-        display: 'flex',
-        alignItems: 'flex-end',
-      },
-    ],
-    ratio: [
-      theme.fonts.small,
-      {
-        marginLeft: '6px',
-        color: theme.semanticColors.bodyText,
-      },
-    ],
-    numerator: {
-      fontWeight: FontWeights.bold,
+
+    calloutlegendText: {
+      marginRight: variant === ChartHoverCardVariant.LongLegend ? '0px' : '24px',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      marginBottom: variant === ChartHoverCardVariant.LongLegend ? '4px' : '0px',
+      flexGrow: 1,
+    },
+
+    calloutContentY: {
+      fontWeight: FontWeights.semibold,
+      flexShrink: 0,
     },
-    denominator: {
+
+    calloutInfoContainer: {},
+
+    ratio: {
+      marginLeft: hasBothMetrics ? '24px' : '0px',
+      flexShrink: 0,
+    },
+
+    numerator: {
       fontWeight: FontWeights.semibold,
     },
-    descriptionMessage: [
-      theme.fonts.small,
-      {
-        color: theme.semanticColors.bodyText,
-        marginTop: '10px',
-        paddingTop: '10px',
-        borderTop: `1px solid ${theme.semanticColors.menuDivider}`,
-      },
-    ],
+
+    denominator: {},
+
+    descriptionMessage: {
+      fontSize: FontSizes.small,
+    },
+
+    calloutLegendIcon: {
+      marginRight: '8px',
+      flexShrink: 0,
+    },
+
+    divider: {
+      height: '1px',
+      backgroundColor: '#c8c8c8',
+      marginTop: '8px',
+      marginBottom: '8px',
+    },
   };
 };
diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts
index 144282bd4e753..a5e5506719d73 100644
--- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts
+++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts
@@ -1,4 +1,10 @@
 import { ITheme, IStyle, IStyleFunctionOrObject } from '@fluentui/react';
+
+export enum ChartHoverCardVariant {
+  ShortLegend = 'short-legend',
+  LongLegend = 'long-legend',
+}
+
 export interface IChartHoverCardProps {
   /**
    * X  value for hover card
@@ -42,6 +48,12 @@ export interface IChartHoverCardProps {
    * The prop used to define the culture to localized the numbers
    */
   culture?: string;
+
+  /**
+   * Specifies the variant of hover card to be rendered
+   * @defaultvalue ChartHoverCardVariant.ShortLegend
+   */
+  variant?: ChartHoverCardVariant;
 }
 
 export interface IChartHoverCardStyles {
@@ -94,6 +106,16 @@ export interface IChartHoverCardStyles {
    * styles for the description
    */
   descriptionMessage?: IStyle;
+
+  /**
+   * styles for the legend icon
+   */
+  calloutLegendIcon?: IStyle;
+
+  /**
+   * styles for the group divider
+   */
+  divider?: IStyle;
 }
 
 export interface IChartHoverCardStyleProps {
@@ -103,17 +125,12 @@ export interface IChartHoverCardStyleProps {
   theme: ITheme;
 
   /**
-   * color for hover card
+   * Specifies the variant of ChartHoverCard to be rendered
    */
-  color?: string;
-
-  /**
-   * X  value for hover card
-   */
-  XValue?: string;
+  variant?: ChartHoverCardVariant;
 
   /**
-   * indicate if denomination is present
+   * Indicates whether both YValue and ratio are present
    */
-  isRatioPresent?: boolean;
+  hasBothMetrics?: boolean;
 }
diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx
index 4e816dc6308bc..811160b8633ba 100644
--- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx
+++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx
@@ -33,42 +33,52 @@ export class AreaChartMultipleExample extends React.Component<{}, IAreaChartBasi
       {
         x: 20,
         y: 9,
+        yAxisCalloutData: { 'Subcount1-1': 2, 'Subcount1-2': 3, 'Subcount1-3': 4 },
       },
       {
         x: 25,
         y: 14,
+        yAxisCalloutData: { 'Subcount1-1': 3, 'Subcount1-2': 5, 'Subcount1-3': 6 },
       },
       {
         x: 30,
         y: 14,
+        yAxisCalloutData: { 'Subcount1-1': 3, 'Subcount1-2': 5, 'Subcount1-3': 6 },
       },
       {
         x: 35,
         y: 23,
+        yAxisCalloutData: { 'Subcount1-1': 6, 'Subcount1-2': 8, 'Subcount1-3': 9 },
       },
       {
         x: 40,
         y: 20,
+        yAxisCalloutData: { 'Subcount1-1': 5, 'Subcount1-2': 7, 'Subcount1-3': 8 },
       },
       {
         x: 45,
         y: 31,
+        yAxisCalloutData: { 'Subcount1-1': 9, 'Subcount1-2': 10, 'Subcount1-3': 12 },
       },
       {
         x: 50,
         y: 29,
+        yAxisCalloutData: { 'Subcount1-1': 8, 'Subcount1-2': 10, 'Subcount1-3': 11 },
       },
       {
         x: 55,
         y: 27,
+        yAxisCalloutData: { 'Subcount1-1': 8, 'Subcount1-2': 9, 'Subcount1-3': 10 },
       },
       {
         x: 60,
         y: 37,
+        yAxisCalloutData: { 'Subcount1-1': 11, 'Subcount1-2': 12, 'Subcount1-3': 14 },
       },
       {
         x: 65,
         y: 51,
+        yAxisCalloutData: { 'Subcount1-1': 16, 'Subcount1-2': 17, 'Subcount1-3': 18 },
       },
     ];
 
@@ -76,42 +86,52 @@ export class AreaChartMultipleExample extends React.Component<{}, IAreaChartBasi
       {
         x: 20,
         y: 21,
+        yAxisCalloutData: { 'Subcount2-1': 6, 'Subcount2-2': 7, 'Subcount2-3': 8 },
       },
       {
         x: 25,
         y: 25,
+        yAxisCalloutData: { 'Subcount2-1': 7, 'Subcount2-2': 8, 'Subcount2-3': 10 },
       },
       {
         x: 30,
         y: 10,
+        yAxisCalloutData: { 'Subcount2-1': 2, 'Subcount2-2': 3, 'Subcount2-3': 5 },
       },
       {
         x: 35,
         y: 10,
+        yAxisCalloutData: { 'Subcount2-1': 2, 'Subcount2-2': 3, 'Subcount2-3': 5 },
       },
       {
         x: 40,
         y: 14,
+        yAxisCalloutData: { 'Subcount2-1': 3, 'Subcount2-2': 5, 'Subcount2-3': 6 },
       },
       {
         x: 45,
         y: 18,
+        yAxisCalloutData: { 'Subcount2-1': 5, 'Subcount2-2': 6, 'Subcount2-3': 7 },
       },
       {
         x: 50,
         y: 9,
+        yAxisCalloutData: { 'Subcount2-1': 2, 'Subcount2-2': 3, 'Subcount2-3': 4 },
       },
       {
         x: 55,
         y: 23,
+        yAxisCalloutData: { 'Subcount2-1': 6, 'Subcount2-2': 8, 'Subcount2-3': 9 },
       },
       {
         x: 60,
         y: 7,
+        yAxisCalloutData: { 'Subcount2-1': 1, 'Subcount2-2': 2, 'Subcount2-3': 4 },
       },
       {
         x: 65,
         y: 55,
+        yAxisCalloutData: { 'Subcount2-1': 17, 'Subcount2-2': 18, 'Subcount2-3': 20 },
       },
     ];
 
@@ -119,42 +139,52 @@ export class AreaChartMultipleExample extends React.Component<{}, IAreaChartBasi
       {
         x: 20,
         y: 30,
+        yAxisCalloutData: { 'Subcount3-1': 9, 'Subcount3-2': 10, 'Subcount3-3': 11 },
       },
       {
         x: 25,
         y: 35,
+        yAxisCalloutData: { 'Subcount3-1': 10, 'Subcount3-2': 12, 'Subcount3-3': 13 },
       },
       {
         x: 30,
         y: 33,
+        yAxisCalloutData: { 'Subcount3-1': 10, 'Subcount3-2': 11, 'Subcount3-3': 12 },
       },
       {
         x: 35,
         y: 40,
+        yAxisCalloutData: { 'Subcount3-1': 12, 'Subcount3-2': 13, 'Subcount3-3': 15 },
       },
       {
         x: 40,
         y: 10,
+        yAxisCalloutData: { 'Subcount3-1': 2, 'Subcount3-2': 3, 'Subcount3-3': 5 },
       },
       {
         x: 45,
         y: 40,
+        yAxisCalloutData: { 'Subcount3-1': 12, 'Subcount3-2': 13, 'Subcount3-3': 15 },
       },
       {
         x: 50,
         y: 34,
+        yAxisCalloutData: { 'Subcount3-1': 10, 'Subcount3-2': 11, 'Subcount3-3': 13 },
       },
       {
         x: 55,
         y: 40,
+        yAxisCalloutData: { ['Subcount3-1']: 12, 'Subcount3-2': 13, 'Subcount3-3': 15 },
       },
       {
         x: 60,
         y: 60,
+        yAxisCalloutData: { 'Subcount3-1': 19, 'Subcount3-2': 20, 'Subcount3-3': 21 },
       },
       {
         x: 65,
         y: 40,
+        yAxisCalloutData: { 'Subcount3-1': 12, 'Subcount3-2': 13, 'Subcount3-3': 15 },
       },
     ];