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 adc1d00ad35b35..6c1abfdb7b11a0 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/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
index dd9fd3cec62648..475fcc021e41d2 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,11 @@ 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);
+    const { updatedTime } = this.props;
+
     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 +531,27 @@ 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 || !!updatedTime) && <div className={this._classNames.divider} />}
+        {!!calloutProps.descriptionMessage && (
+          <div className={this._classNames.descriptionMessage}>{calloutProps.descriptionMessage}</div>
+        )}
+        {!!updatedTime && <div className={this._classNames.updatedTime}>Updated {updatedTime.toLocaleString()}</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 783b67fb24f274..0105a3a521e852 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,59 @@ 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,
+    },
+
+    updatedTime: {
+      marginTop: '8px',
+      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 f479a0b4b372fc..100dbafcdb4257 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,16 @@ export interface ICartesianChartStyles {
    * Styles for the chart wrapper div
    */
   chartWrapper?: IStyle;
+
+  /**
+   * Styles for the group divider in callout
+   */
+  divider?: IStyle;
+
+  /**
+   * Styles for the updated time text in callout
+   */
+  updatedTime?: IStyle;
 }
 
 export interface ICartesianChartProps {
@@ -380,6 +380,17 @@ 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;
+
+  /**
+   * Time at which the chart data was last updated
+   */
+  updatedTime?: Date;
 }
 
 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 790d3232b9d484..2ce9fab2900852 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
@@ -217,12 +217,19 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
             className=
 
                 {
-                  font-weight: 600;
                   margin-bottom: 8px;
                 }
           >
-            2020/04/30
-             
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+            >
+              2020/04/30
+               
+            </div>
           </div>
           <div
             className=
@@ -241,6 +248,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
                 className=
 
                     {
+                      flex-shrink: 0;
                       margin-right: 8px;
                     }
                 height={14}
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 4773f66ec6b602..f2892b08bd6f39 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
@@ -217,12 +217,19 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
             className=
 
                 {
-                  font-weight: 600;
                   margin-bottom: 8px;
                 }
           >
-            2020/04/30
-             
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+            >
+              2020/04/30
+               
+            </div>
           </div>
           <div
             className=
@@ -241,6 +248,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
                 className=
 
                     {
+                      flex-shrink: 0;
                       margin-right: 8px;
                     }
                 height={14}
@@ -5327,12 +5335,19 @@ exports[`Should hide callout on mouse leave 1`] = `
               class=
 
                   {
-                    font-weight: 600;
                     margin-bottom: 8px;
                   }
             >
-              2020/04/30
-               
+              <div
+                class=
+
+                    {
+                      font-weight: 600;
+                    }
+              >
+                2020/04/30
+                 
+              </div>
             </div>
             <div
               class=
@@ -5351,6 +5366,7 @@ exports[`Should hide callout on mouse leave 1`] = `
                   class=
 
                       {
+                        flex-shrink: 0;
                         margin-right: 8px;
                       }
                   height="14"
diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.base.tsx b/packages/react-charting/src/components/GaugeChart/GaugeChart.base.tsx
index bb9514b7856793..f1a91c5d107a9f 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,11 @@ 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);
+    const { updatedTime } = this.props;
+
     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 +540,27 @@ 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 || !!updatedTime) && <div className={this._classNames.divider} />}
+        {!!calloutProps.descriptionMessage && (
+          <div className={this._classNames.descriptionMessage}>{calloutProps.descriptionMessage}</div>
+        )}
+        {!!updatedTime && <div className={this._classNames.updatedTime}>Updated {updatedTime.toLocaleString()}</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 ccc767b32e0ab5..cc2634c10c9d2a 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,58 @@ 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,
+    },
+
+    updatedTime: {
+      marginTop: '8px',
+      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 49a1456494c4f6..6c6ec4c3a37f64 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,17 @@ 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;
+
+  /**
+   * Time at which the chart data was last updated
+   */
+  updatedTime?: Date;
 }
 
 export interface IGaugeChartStyleProps {
@@ -153,16 +165,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 +257,14 @@ export interface IGaugeChartStyles {
    * Styles for the shape object in the callout
    */
   shapeStyles?: IStyle;
+
+  /**
+   * Styles for the group divider in callout
+   */
+  divider?: IStyle;
+
+  /**
+   * Styles for the updated time text in callout
+   */
+  updatedTime?: 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 e460dbf1020bc2..74122d81236d6a 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 c8f3ec7874136b..3b6b0e21e36145 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
@@ -678,11 +678,18 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
             className=
 
                 {
-                  font-weight: 600;
                   margin-bottom: 8px;
                 }
           >
-             
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+            >
+               
+            </div>
           </div>
           <div
             className=
@@ -701,6 +708,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
                 className=
 
                     {
+                      flex-shrink: 0;
                       margin-right: 8px;
                     }
                 height={14}
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 da38a81970f4df..324a942b639655 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
@@ -426,12 +426,19 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
             className=
 
                 {
-                  font-weight: 600;
                   margin-bottom: 8px;
                 }
           >
-            Execllent (0-200)
-             
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+            >
+              Execllent (0-200)
+               
+            </div>
           </div>
           <div
             className=
@@ -450,6 +457,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
                 className=
 
                     {
+                      flex-shrink: 0;
                       margin-right: 8px;
                     }
                 height={14}
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 255bc572e882f0..852feeddfb249f 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
@@ -434,12 +434,19 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             className=
 
                 {
-                  font-weight: 600;
                   margin-bottom: 8px;
                 }
           >
-            2020/04/30
-             
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+            >
+              2020/04/30
+               
+            </div>
           </div>
           <div
             className=
@@ -458,6 +465,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
                 className=
 
                     {
+                      flex-shrink: 0;
                       margin-right: 8px;
                     }
                 height={14}
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 ef7892abdaf9a8..f537640fa736fb 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
@@ -1105,12 +1105,19 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct
             className=
 
                 {
-                  font-weight: 600;
                   margin-bottom: 8px;
                 }
           >
-            37%
-             
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+            >
+              37%
+               
+            </div>
           </div>
           <div
             className=
@@ -1129,6 +1136,7 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct
                 className=
 
                     {
+                      flex-shrink: 0;
                       margin-right: 8px;
                     }
                 height={14}
@@ -1145,6 +1153,7 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct
                 className=
 
                     {
+                      flex-grow: 1;
                       margin-bottom: 0px;
                       margin-right: 24px;
                       overflow: hidden;
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 2a881059711d3a..b4b038fff0d5a2 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/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
index 50039d7dc5ec56..4030f718e37ff2 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
@@ -588,12 +588,19 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             className=
 
                 {
-                  font-weight: 600;
                   margin-bottom: 8px;
                 }
           >
-            2020/04/30
-             
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+            >
+              2020/04/30
+               
+            </div>
           </div>
           <div
             className=
@@ -612,6 +619,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                 className=
 
                     {
+                      flex-shrink: 0;
                       margin-right: 8px;
                     }
                 height={14}
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 33c8e8fe76a5ef..d4ca53c5ea5569 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
@@ -291,12 +291,19 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
                   className=
 
                       {
-                        font-weight: 600;
                         margin-bottom: 8px;
                       }
                 >
-                  first Lorem ipsum dolor sit amet
-                   
+                  <div
+                    className=
+
+                        {
+                          font-weight: 600;
+                        }
+                  >
+                    first Lorem ipsum dolor sit amet
+                     
+                  </div>
                 </div>
                 <div
                   className=
@@ -315,6 +322,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
                       className=
 
                           {
+                            flex-shrink: 0;
                             margin-right: 8px;
                           }
                       height={14}
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 c3a62ed3a0139b..110e2951173aed 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
@@ -633,12 +633,19 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             className=
 
                 {
-                  font-weight: 600;
                   margin-bottom: 8px;
                 }
           >
-            2020/04/30
-             
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+            >
+              2020/04/30
+               
+            </div>
           </div>
           <div
             className=
@@ -657,6 +664,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
                 className=
 
                     {
+                      flex-shrink: 0;
                       margin-right: 8px;
                     }
                 height={14}
@@ -673,6 +681,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
                 className=
 
                     {
+                      flex-grow: 1;
                       margin-bottom: 0px;
                       margin-right: 24px;
                       overflow: hidden;
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 10f3d23a45d359..33db0e7d5e81c4 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
@@ -3281,12 +3281,19 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             className=
 
                 {
-                  font-weight: 600;
                   margin-bottom: 8px;
                 }
           >
-            2020/04/30
-             
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+            >
+              2020/04/30
+               
+            </div>
           </div>
           <div
             className=
@@ -3305,6 +3312,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
                 className=
 
                     {
+                      flex-shrink: 0;
                       margin-right: 8px;
                     }
                 height={14}
@@ -3321,6 +3329,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
                 className=
 
                     {
+                      flex-grow: 1;
                       margin-bottom: 0px;
                       margin-right: 24px;
                       overflow: hidden;
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 42d4e97f79583d..dd20bbd7b60d4a 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
@@ -572,12 +572,19 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
             className=
 
                 {
-                  font-weight: 600;
                   margin-bottom: 8px;
                 }
           >
-            2020/04/30
-             
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+            >
+              2020/04/30
+               
+            </div>
           </div>
           <div
             className=
@@ -596,6 +603,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
                 className=
 
                     {
+                      flex-shrink: 0;
                       margin-right: 8px;
                     }
                 height={14}
@@ -612,6 +620,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
                 className=
 
                     {
+                      flex-grow: 1;
                       margin-bottom: 0px;
                       margin-right: 24px;
                       overflow: hidden;
diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx
index 83c1936015f39f..e4c3247797a7d0 100644
--- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx
+++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx
@@ -26,7 +26,9 @@ export class ChartHoverCardBase extends React.Component<IChartHoverCardProps, {}
 
     return (
       <div className={this._classNames.calloutContentRoot}>
-        <div className={this._classNames.calloutContentX}>{XValue || convertToLocaleString(Legend, culture)} </div>
+        <div className={this._classNames.calloutDateTimeContainer}>
+          <div className={this._classNames.calloutContentX}>{XValue || convertToLocaleString(Legend, culture)} </div>
+        </div>
         <div className={this._classNames.calloutInfoContainer}>
           {variant === ChartHoverCardVariant.LongLegend && !!XValue && !!Legend && (
             <div className={this._classNames.calloutlegendText}>{convertToLocaleString(Legend, culture)}</div>
diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts
index 612f4022643c34..bef250b142a906 100644
--- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts
+++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts
@@ -12,11 +12,12 @@ export const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChar
       backgroundBlendMode: 'normal, luminosity',
     },
 
-    calloutDateTimeContainer: {},
+    calloutDateTimeContainer: {
+      marginBottom: '8px',
+    },
 
     calloutContentX: {
       fontWeight: FontWeights.semibold,
-      marginBottom: '8px',
     },
 
     calloutBlockContainer: {
@@ -30,6 +31,7 @@ export const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChar
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       marginBottom: variant === ChartHoverCardVariant.LongLegend ? '4px' : '0px',
+      flexGrow: 1,
     },
 
     calloutContentY: {
@@ -56,6 +58,7 @@ export const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChar
 
     calloutLegendIcon: {
       marginRight: '8px',
+      flexShrink: 0,
     },
 
     divider: {
diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts
index cb0f5f1bb851bf..25d7eb7b991a09 100644
--- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts
+++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts
@@ -50,7 +50,7 @@ export interface IChartHoverCardProps {
   culture?: string;
 
   /**
-   * Specifies the variant of ChartHoverCard to be rendered
+   * Specifies the variant of hover card to be rendered
    * @defaultvalue ChartHoverCardVariant.ShortLegend
    */
   variant?: ChartHoverCardVariant;
@@ -112,13 +112,19 @@ export interface IChartHoverCardStyles {
    */
   descriptionMessage?: IStyle;
 
-  /** styles for the legend icon */
+  /**
+   * styles for the legend icon
+   */
   calloutLegendIcon?: IStyle;
 
-  /** styles for the group divider */
+  /**
+   * styles for the group divider
+   */
   divider?: IStyle;
 
-  /** styles for the updated time text */
+  /**
+   * styles for the updated time text
+   */
   updatedTime?: IStyle;
 }
 
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 4e816dc6308bcc..811160b8633ba1 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 },
       },
     ];