From e5e79fce0bcd295ee60c23cb35904d6c90a417f5 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Wed, 20 Nov 2024 21:58:37 +0000
Subject: [PATCH 01/19] add gradient declarations

---
 .../library/src/utilities/gradients.ts        | 195 ++++++++++++++++++
 1 file changed, 195 insertions(+)
 create mode 100644 packages/charts/react-charts-preview/library/src/utilities/gradients.ts

diff --git a/packages/charts/react-charts-preview/library/src/utilities/gradients.ts b/packages/charts/react-charts-preview/library/src/utilities/gradients.ts
new file mode 100644
index 0000000000000..9ba53b1884fbd
--- /dev/null
+++ b/packages/charts/react-charts-preview/library/src/utilities/gradients.ts
@@ -0,0 +1,195 @@
+export const DataVizGradientPalette = {
+  gradient1: 'default.1',
+  gradient2: 'default.2',
+  gradient3: 'default.3',
+  gradient4: 'default.4',
+  gradient5: 'default.5',
+  gradient6: 'default.6',
+  gradient7: 'default.7',
+  gradient8: 'default.8',
+  gradient9: 'default.9',
+  gradient10: 'default.10',
+  // extended gradients
+  gradient1Ext: 'extended.1',
+  gradient2Ext: 'extended.2',
+  gradient3Ext: 'extended.3',
+  gradient4Ext: 'extended.4',
+  gradient5Ext: 'extended.5',
+  gradient6Ext: 'extended.6',
+  gradient7Ext: 'extended.7',
+  gradient8Ext: 'extended.8',
+  gradient9Ext: 'extended.9',
+  gradient10Ext: 'extended.10',
+  // status gradients
+  success: 'semantic.success',
+  highSuccess: 'semantic.highSuccess',
+  warning: 'semantic.warning',
+  error: 'semantic.error',
+  highError: 'semantic.highError',
+  disabled: 'semantic.disabled',
+};
+
+/**
+ * Key: Color code.
+ * Value:
+ *
+ * Index 0 - Default gradient for light theme
+ *      ├── Index 0 - start color of gradient
+ *      └── Index 1 - end color of gradient
+ *
+ * Index 1 - gradient for dark theme
+ *      ├── Index 0 - start color of gradient
+ *      └── Index 1 - end color of gradient
+ */
+type GradientPalette = { [key: string]: [string, string][] };
+
+const defaultGradientPalette: GradientPalette = {
+  '1': [
+    ['#4760D5', '#637CEF'], // [cornflower.shade10, cornflower.tint10],
+    ['#4F6BED', '#637CEF'], // [cornflower.shade10, cornflower.tint10],
+  ],
+  '2': [
+    ['#795AA6', '#9373C0'], // [orchid.shade20, orchid.tint10],
+    ['#8764B8', '#A083C9'], // [orchid.primary, orchid.tint20],
+  ],
+  '3': [
+    ['#159195', '#2AA0A4'], // [teal.tint10, teal.tint20],
+    ['#159195', '#2AA0A4'], // [teal.tint10, teal.tint20],
+  ],
+  '4': [
+    ['#B146C2', '#C36BD1'], // [lilac.primary, lilac.tint20],
+    ['#B146C2', '#C36BD1'], // [lilac.primary, lilac.tint20],
+  ],
+  '5': [
+    ['#3487C7', '#3A96DD'], // [lightBlue.shade10, lightBlue.primary],
+    ['#3487C7', '#3A96DD'], // [lightBlue.shade20, lightBlue.primary],
+  ],
+  '6': [
+    ['#0E7A0B', '#13A10E'], // [lightGreen.shade20, lightGreen.primary],
+    ['#11910D', '#27AC22'], // [lightGreen.shade10, lightGreen.tint10],
+  ],
+  '7': [
+    ['#E61C99', '#EE5FB7'], // [hotPink.tint10, hotPink.tint30],
+    ['#E61C99', '#EE5FB7'], // [hotPink.tint10, hotPink.tint30],
+  ],
+  '8': [
+    ['#CA5010', '#D77440'], // [pumpkin.primary, pumpkin.tint20],
+    ['#CA5010', '#D77440'], // [pumpkin.primary, pumpkin.tint10],
+  ],
+  '9': [
+    ['#57811B', '#689920'], // [lime.shade20, lime.shade10],
+    ['#57811B', '#689920'], // [lime.shade20, lime.shade10],
+  ],
+  '10': [
+    ['#937700', '#AE8C00'], // [gold.shade20, gold.shade10],
+    ['#937700', '#AE8C00'], // [gold.shade20, gold.shade10],
+  ],
+};
+
+const extendedGradientPalette: GradientPalette = {
+  '1': [
+    ['#2C3C85', '#3C51B4'], // [cornflower.shade30, cornflower.shade20],
+    ['#93A4F4', '#C8D1FA'], // [cornflower.tint30, cornflower.tint40],
+  ],
+  '2': [
+    ['#4C3867', '#674C8C'], // [orchid.shade30, orchid.shade20],
+    ['#A083C9', '#B29AD4'], // [orchid.tint20, orchid.tint30],
+  ],
+  '3': [
+    ['#02494C', '#038387'], // [teal.shade30, teal.primary],
+    ['#4CB4B7', '#9BD9DB'], // [teal.tint30, teal.tint40],
+  ],
+  '4': [
+    ['#63276D', '#863593'], // [lilac.shade30, lilac.shade20],
+    ['#C36BD1', '#CF87DA'], // [lilac.tint20, lilac.tint30],
+  ],
+  '5': [
+    ['#20547C', '#2C72A8'], // [lightBlue.shade30, lightBlue.shade20],
+    ['#4FA1E1', '#83BDEB'], // [lightBlue.tint10, lightBlue.tint30],
+  ],
+  '6': [
+    ['#0B5A08', '#0E7A0B'], // [lightGreen.shade30, lightGreen.shade20],
+    ['#27AC22', '#5EC75A'], // [lightGreen.tint10, lightGreen.tint30],
+  ],
+  '7': [
+    ['#AD006A', '#E3008C'], // [hotPink.shade20, hotPink.primary],
+    ['#EE5FB7', '#F7ADDA'], // [hotPink.tint30, hotPink.tint40],
+  ],
+  '8': [
+    ['#9A3D0C', '#CA5010'], // [pumpkin.shade20, pumpkin.primary],
+    ['#D77440', '#DF8E64'], // [pumpkin.tint20, pumpkin.tint30],
+  ],
+  '9': [
+    ['#405F14', '#57811B'], // [lime.shade30, lime.shade20],
+    ['#73AA24', '#A4CC6C'], // [lime.primary, lime.tint30],
+  ],
+  '10': [
+    ['#6D5700', '#937700'], // [gold.shade30, gold.shade20],
+    ['#D0B232', '#DAC157'], // [gold.tint20, gold.tint30],
+  ],
+};
+
+const semanticGradientPalette: GradientPalette = {
+  success: [
+    ['#0C5E0C', '#107C10'], // [green.shade20, green.primary],
+    ['#218C21', '#359B35'], // [green.tint10, green.tint20],
+  ],
+  highSuccess: [
+    ['#107C10', '#359B35'], // [green.primary, green.tint20],
+    ['#359B35', '#9FD89F'], // [green.tint20, green.tint40],
+  ],
+  warning: [
+    ['#DE590B', '#F7630C'], // [orange.shade10, orange.primary],
+    ['#DE590B', '#F87528'], // [orange.shade10, orange.tint10],
+  ],
+  error: [
+    ['#B10E1C', '#CC2635'], // [cranberry.shade10, cranberry.tint10],
+    ['#D33F4C', '#EEACB2'], // [cranberry.tint20, cranberry.tint40],
+  ],
+  highError: [
+    ['#6E0811', '#B10E1C'], // [cranberry.shade30, cranberry.shade10],
+    ['#D33F4C', '#DC626D'], // [cranberry.tint20, cranberry.tint30],
+  ],
+  disabled: [
+    ['#E6E6E6', '#E6E6E6'],
+    ['#E6E6E6', '#E6E6E6'],
+  ],
+};
+
+const Gradients: { [key: string]: GradientPalette } = {
+  default: defaultGradientPalette, // base gradients
+  semantic: semanticGradientPalette, // status gradients
+  extended: extendedGradientPalette, // extended gradients
+};
+
+const DEFAULT_COLORS = Object.values(defaultGradientPalette);
+const TOKENS = Object.values(DataVizGradientPalette);
+
+const getThemeSpecificGradient = (gradients: [string, string][], isDarkTheme: boolean): [string, string] => {
+  if (gradients.length === 0) {
+    return ['', ''];
+  }
+
+  const colorIdx = Number(isDarkTheme);
+
+  if (colorIdx < gradients.length) {
+    return gradients[colorIdx];
+  }
+
+  return gradients[0];
+};
+
+export const getNextGradient = (index: number, offset: number = 0, isDarkTheme: boolean = false): [string, string] => {
+  const gradients = DEFAULT_COLORS[(index + offset) % DEFAULT_COLORS.length];
+  return getThemeSpecificGradient(gradients, isDarkTheme);
+};
+
+export const getGradientFromToken = (token: string, isDarkTheme: boolean = false): [string, string] => {
+  if (TOKENS.indexOf(token) >= 0) {
+    const [paletteName, colorCode] = token.split('.');
+    const colors = Gradients[paletteName][colorCode];
+
+    return getThemeSpecificGradient(colors, isDarkTheme);
+  }
+  return [token, token];
+};

From b3623721088b482a5172eb1d8ba6a0ed1f468fb6 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Wed, 20 Nov 2024 22:19:20 +0000
Subject: [PATCH 02/19] replace color with gradient in ChartDataPoint and add
 gradient utility tests

---
 .../library/src/types/DataPoint.ts            |  4 +-
 .../src/utilities/UtilityUnitTests.test.ts    | 68 +++++++++++++++++++
 .../library/src/utilities/index.ts            |  1 +
 3 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/packages/charts/react-charts-preview/library/src/types/DataPoint.ts b/packages/charts/react-charts-preview/library/src/types/DataPoint.ts
index f5993462b1368..6f31f530b2ad3 100644
--- a/packages/charts/react-charts-preview/library/src/types/DataPoint.ts
+++ b/packages/charts/react-charts-preview/library/src/types/DataPoint.ts
@@ -129,9 +129,9 @@ export interface ChartDataPoint {
   onClick?: VoidFunction;
 
   /**
-   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.
+   * Gradient for the legend in the chart. If not provided, it will fallback on the default gradient palette.
    */
-  color?: string;
+  gradient?: [string, string];
 
   /**
    * placeholder data point
diff --git a/packages/charts/react-charts-preview/library/src/utilities/UtilityUnitTests.test.ts b/packages/charts/react-charts-preview/library/src/utilities/UtilityUnitTests.test.ts
index 183ed7f1dbcf1..b0c96c270cd05 100644
--- a/packages/charts/react-charts-preview/library/src/utilities/UtilityUnitTests.test.ts
+++ b/packages/charts/react-charts-preview/library/src/utilities/UtilityUnitTests.test.ts
@@ -12,6 +12,7 @@ import { ScaleBand } from 'd3-scale';
 import { select as d3Select } from 'd3-selection';
 import { conditionalDescribe, isTimezoneSet } from './TestUtility.test';
 import * as vbcUtils from './vbc-utils';
+import { getGradientFromToken, getNextGradient } from './gradients';
 const { Timezone } = require('../../scripts/constants');
 const env = require('../../config/tests');
 
@@ -1354,3 +1355,70 @@ describe('getClosestPairDiffAndRange', () => {
     expect(result).toEqual([2 * 24 * 60 * 60 * 1000, 4 * 24 * 60 * 60 * 1000]);
   });
 });
+
+/** -------- dataviz gradient tests ------ */
+const mockGradients = {
+  // as per gradients.ts
+  default: [
+    [
+      ['#4760D5', '#637CEF'],
+      ['#4F6BED', '#637CEF'],
+    ],
+    [
+      ['#795AA6', '#9373C0'],
+      ['#8764B8', '#A083C9'],
+    ],
+    // Add more
+  ],
+  semantic: [
+    [
+      ['#0C5E0C', '#107C10'],
+      ['#218C21', '#359B35'],
+    ],
+    [
+      ['#107C10', '#359B35'],
+      ['#359B35', '#9FD89F'],
+    ],
+    // Add more
+  ],
+};
+
+describe('getNextGradient', () => {
+  it('should return the correct gradient based on index and offset in light theme', () => {
+    const result = getNextGradient(0, 0, false);
+    expect(result).toEqual(mockGradients.default[0][0]);
+  });
+
+  it('should return the correct gradient based on index and offset in dark theme', () => {
+    const result = getNextGradient(1, 0, true);
+    expect(result).toEqual(mockGradients.default[1][1]);
+  });
+
+  it('should wrap around when index + offset exceeds gradient length', () => {
+    const result = getNextGradient(10, 0, false); // 10 is outside the range of available gradients
+    expect(result).toEqual(mockGradients.default[0][0]);
+  });
+});
+
+describe('getGradientFromToken', () => {
+  it('should return the correct gradient for a valid token in light theme', () => {
+    const result = getGradientFromToken('default.1', false);
+    expect(result).toEqual(mockGradients.default[0][0]);
+  });
+
+  it('should return the correct gradient for a valid token in dark theme', () => {
+    const result = getGradientFromToken('semantic.success', true);
+    expect(result).toEqual(mockGradients.semantic[0][1]);
+  });
+
+  it('should return the token itself if the token does not match any gradient', () => {
+    const invalidToken = 'nonexistent.token';
+    const result = getGradientFromToken(invalidToken, false);
+    expect(result).toEqual([invalidToken, invalidToken]);
+  });
+
+  it('should handle invalid tokens with split error gracefully', () => {
+    const result = getGradientFromToken('invalidTokenWithoutDot', false);
+    expect(result).toEqual(['invalidTokenWithoutDot', 'invalidTokenWithoutDot']);
+  });
+});
diff --git a/packages/charts/react-charts-preview/library/src/utilities/index.ts b/packages/charts/react-charts-preview/library/src/utilities/index.ts
index f5a07d8910af7..41e42e7896ba1 100644
--- a/packages/charts/react-charts-preview/library/src/utilities/index.ts
+++ b/packages/charts/react-charts-preview/library/src/utilities/index.ts
@@ -1,3 +1,4 @@
 export * from './utilities';
 export * from './colors';
 export * from './vbc-utils';
+export * from './gradients';

From 758f388813ddcaab19cc8c8d08732ac405e91f90 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Wed, 20 Nov 2024 23:54:01 +0000
Subject: [PATCH 03/19] refactor: update test-data.ts dataPoints to use
 gradient property

---
 .../react-charts-preview/library/src/index.ts  |  1 +
 .../library/src/utilities/test-data.ts         | 18 +++++++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/charts/react-charts-preview/library/src/index.ts b/packages/charts/react-charts-preview/library/src/index.ts
index 69ed54b1d15d9..ea2c8323f7b23 100644
--- a/packages/charts/react-charts-preview/library/src/index.ts
+++ b/packages/charts/react-charts-preview/library/src/index.ts
@@ -7,4 +7,5 @@ export * from './CartesianChart';
 export * from './types/index';
 export * from './Sparkline';
 export * from './utilities/colors';
+export * from './utilities/gradients';
 export * from './Popover';
diff --git a/packages/charts/react-charts-preview/library/src/utilities/test-data.ts b/packages/charts/react-charts-preview/library/src/utilities/test-data.ts
index 6a9fa22f21e7e..fe1ea6432f2c3 100644
--- a/packages/charts/react-charts-preview/library/src/utilities/test-data.ts
+++ b/packages/charts/react-charts-preview/library/src/utilities/test-data.ts
@@ -124,18 +124,18 @@ export const pointsHBCWA = [
 ];
 
 export const pointsDC: ChartDataPoint[] = [
-  { legend: 'first', data: 20000, color: '#E5E5E5', xAxisCalloutData: '2020/04/30' },
-  { legend: 'second', data: 39000, color: '#0078D4', xAxisCalloutData: '2020/04/20' },
-  { legend: 'third', data: 45000, color: '#DADADA', xAxisCalloutData: '2020/04/25' },
+  { legend: 'first', data: 20000, gradient: ['#E5E5E5', ''], xAxisCalloutData: '2020/04/30' },
+  { legend: 'second', data: 39000, gradient: ['#0078D4', ''], xAxisCalloutData: '2020/04/20' },
+  { legend: 'third', data: 45000, gradient: ['#DADADA', ''], xAxisCalloutData: '2020/04/25' },
 ];
 
 export const pointsDCElevateMinimumsExample: ChartDataPoint[] = [
-  { legend: 'first', data: 39000, color: '#E5E5E5', xAxisCalloutData: '2020/04/30' },
-  { legend: 'second', data: 20, color: '#0078D4', xAxisCalloutData: '2020/04/20' },
-  { legend: 'third', data: 20, color: '#DADADA', xAxisCalloutData: '2020/04/25' },
-  { legend: 'fourth', data: 20, color: '#DADADA', xAxisCalloutData: '2020/04/25' },
-  { legend: 'fifth', data: 20, color: '#DADADA', xAxisCalloutData: '2020/04/25' },
-  { legend: 'sixth', data: 20, color: '#DADADA', xAxisCalloutData: '2020/04/25' },
+  { legend: 'first', data: 39000, gradient: ['#E5E5E5', ''], xAxisCalloutData: '2020/04/30' },
+  { legend: 'second', data: 20, gradient: ['#0078D4', ''], xAxisCalloutData: '2020/04/20' },
+  { legend: 'third', data: 20, gradient: ['#DADADA', ''], xAxisCalloutData: '2020/04/25' },
+  { legend: 'fourth', data: 20, gradient: ['#DADADA', ''], xAxisCalloutData: '2020/04/25' },
+  { legend: 'fifth', data: 20, gradient: ['#DADADA', ''], xAxisCalloutData: '2020/04/25' },
+  { legend: 'sixth', data: 20, gradient: ['#DADADA', ''], xAxisCalloutData: '2020/04/25' },
 ];
 
 export const chartPointsDC: ChartProps = {

From 09b12523ff101047e15bab33996d8c1a639345a7 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Thu, 21 Nov 2024 01:23:48 +0000
Subject: [PATCH 04/19] feat: implement gradient support in DonutChart
 components

---
 .../src/components/DonutChart/Arc/Arc.tsx     | 37 ++++++++++++++++---
 .../components/DonutChart/Arc/Arc.types.ts    |  4 +-
 .../src/components/DonutChart/DonutChart.tsx  | 29 ++++++---------
 .../src/components/DonutChart/Pie/Pie.tsx     | 15 +++-----
 4 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx b/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx
index e0eb1497a86f3..84b4f622da8eb 100644
--- a/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx
@@ -5,6 +5,7 @@ import { ChartDataPoint } from '../index';
 import { ArcProps } from './index';
 import { format as d3Format } from 'd3-format';
 import { formatValueWithSIPrefix, useRtl } from '../../../utilities/index';
+import { useId } from '@fluentui/react-utilities';
 
 // Create a Arc within Donut Chart variant which uses these default styles and this styled subcomponent.
 /**
@@ -13,7 +14,7 @@ import { formatValueWithSIPrefix, useRtl } from '../../../utilities/index';
  */
 export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivElement, ArcProps>(
   (props, forwardedRef) => {
-    const arc = d3Arc();
+    const arc = d3Arc().cornerRadius(5);
     const currentRef = React.createRef<SVGPathElement>();
     const _isRTL: boolean = useRtl();
     const classes = useArcStyles_unstable(props);
@@ -90,33 +91,59 @@ export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivEl
     //TO DO 'replace' is throwing error
     const id = props.uniqText! + props.data!.data.legend!.replace(/\s+/, '') + props.data!.data.data;
     const opacity: number = props.activeArc === props.data!.data.legend || props.activeArc === '' ? 1 : 0.1;
+
+    const clipId = useId('Arc_clip') + `${props.gradient[0]}_${props.gradient[1]}`;
+    const gradientFill = `conic-gradient(
+      from ${props.data?.startAngle}rad,
+      ${props.gradient[0]},
+      ${props.gradient[1]} ${props.data?.endAngle}rad
+    )`;
+
+    const pathData = arc({ ...props.data!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!;
+    const focusPathData = arc({ ...props.focusData!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!;
+
     return (
       <g ref={currentRef}>
         {!!focusedArcId && focusedArcId === id && (
           // TODO innerradius and outerradius were absent
           <path
             id={id + 'focusRing'}
-            d={arc({ ...props.focusData!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!}
+            d={focusPathData}
             className={classes.focusRing}
           />
         )}
         <path
           // TODO innerradius and outerradius were absent
           id={id}
-          d={arc({ ...props.data!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!}
+          d={pathData}
           className={classes.root}
-          style={{ fill: props.color, cursor: href ? 'pointer' : 'default' }}
+          style={{ fill: 'transparent', cursor: href ? 'pointer' : 'default' }}
           onFocus={_onFocus.bind(this, props.data!.data, id)}
           data-is-focusable={props.activeArc === props.data!.data.legend || props.activeArc === ''}
           onMouseOver={_hoverOn.bind(this, props.data!.data)}
           onMouseMove={_hoverOn.bind(this, props.data!.data)}
           onMouseLeave={_hoverOff}
           onBlur={_onBlur}
-          opacity={opacity}
           onClick={props.data?.data.onClick}
           aria-label={_getAriaLabel()}
           role="img"
         />
+        {/* clipping mask  */}
+        <clipPath id={clipId}>
+          <path d={pathData} />
+        </clipPath>
+        {/* div to attach conic-gradient fill to */}
+        <foreignObject x="-50%" y="-50%" width="100%" height="100%" clipPath={`url(#${clipId})`}>
+          <div
+            className={classes.root}
+            style={{
+              width: '100%',
+              height: '100%',
+              background: gradientFill,
+              opacity,
+            }}
+          />
+        </foreignObject>
         {_renderArcLabel(classes.arcLabel)}
       </g>
     );
diff --git a/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.types.ts b/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.types.ts
index 5c434fa213de2..cea20b67e37ec 100644
--- a/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.types.ts
+++ b/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.types.ts
@@ -31,9 +31,9 @@ export interface ArcProps {
   outerRadius: number;
 
   /**
-   * Color for the Arc.
+   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.
    */
-  color: string;
+  gradient: [string, string];
 
   /**
    * Defines the function that is executed upon hovering over the legend
diff --git a/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.tsx b/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.tsx
index 0a0b100fa588d..f89e0eb5afe53 100644
--- a/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.tsx
@@ -5,7 +5,7 @@ import { DonutChartProps } from './DonutChart.types';
 import { useDonutChartStyles_unstable } from './useDonutChartStyles.styles';
 import { ChartDataPoint } from '../../DonutChart';
 import { convertToLocaleString } from '../../utilities/locale-util';
-import { getColorFromToken, getNextColor } from '../../utilities/index';
+import { getNextGradient } from '../../utilities/index';
 import { Legend, Legends } from '../../index';
 import { useId } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
@@ -76,13 +76,13 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
       });
       return elevatedData;
     }
+
     function _createLegends(chartData: ChartDataPoint[]): JSX.Element {
       const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {
-        const color: string = point.color!;
         // mapping data to the format Legends component needs
-        const legend: Legend = {
+        const pointLegend: Legend = {
           title: point.legend!,
-          color,
+          color: point.gradient![0],
           action: () => {
             if (selectedLegend === point.legend) {
               setSelectedLegend('');
@@ -98,7 +98,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
             setActiveLegend('');
           },
         };
-        return legend;
+        return pointLegend;
       });
       const legends = (
         <Legends
@@ -115,7 +115,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
       setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
       setValue(data.data!.toString());
       setLegend(data.legend);
-      setColor(data.color!);
+      setColor(data.gradient![0]);
       setXCalloutValue(data.xAxisCalloutData!);
       setYCalloutValue(data.yAxisCalloutData!);
       setFocusedArcId(id);
@@ -128,7 +128,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
         setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
         setValue(data.data!.toString());
         setLegend(data.legend);
-        setColor(data.color!);
+        setColor(data.gradient![0]);
         setXCalloutValue(data.xAxisCalloutData!);
         setYCalloutValue(data.yAxisCalloutData!);
         setDataPointCalloutProps(data);
@@ -190,17 +190,11 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
       );
     }
 
-    function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {
+    function _addDefaultGradients(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {
       return donutChartDataPoint
         ? donutChartDataPoint.map((item, index) => {
-            let defaultColor: string;
-            if (typeof item.color === 'undefined') {
-              defaultColor = getNextColor(index, 0);
-            } else {
-              defaultColor = getColorFromToken(item.color);
-            }
-            return { ...item, defaultColor };
-          })
+          return { ...item, gradient: item.gradient ?? getNextGradient(index, 0) };
+        })
         : [];
     }
 
@@ -252,7 +246,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
     }
 
     const { data, hideLegend = false } = props;
-    const points = _addDefaultColors(data?.chartData);
+    const points = _addDefaultGradients(data?.chartData);
 
     const classes = useDonutChartStyles_unstable(props);
 
@@ -263,6 +257,7 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
     const chartData = _elevateToMinimums(points.filter((d: ChartDataPoint) => d.data! >= 0));
     const valueInsideDonut = _valueInsideDonut(props.valueInsideDonut!, chartData!);
     const focusAttributes = useFocusableGroup();
+
     return !_isChartEmpty() ? (
       <div
         className={classes.root}
diff --git a/packages/charts/react-charts-preview/library/src/components/DonutChart/Pie/Pie.tsx b/packages/charts/react-charts-preview/library/src/components/DonutChart/Pie/Pie.tsx
index e0a04a99bd0fd..71c540febfaa2 100644
--- a/packages/charts/react-charts-preview/library/src/components/DonutChart/Pie/Pie.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/DonutChart/Pie/Pie.tsx
@@ -2,12 +2,12 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from 'react';
-import { pie as d3Pie } from 'd3-shape';
+import { pie as d3Pie, PieArcDatum } from 'd3-shape';
 import { PieProps } from './index';
 import { Arc } from '../Arc/index';
 import { ChartDataPoint } from '../index';
 import { usePieStyles_unstable } from './usePieStyles.styles';
-import { wrapTextInsideDonut } from '../../../utilities/index';
+import { getNextGradient, wrapTextInsideDonut } from '../../../utilities/index';
 const TEXT_PADDING: number = 5;
 
 // Create a Pie within Donut Chart variant which uses these default styles and this styled subcomponent.
@@ -25,7 +25,6 @@ export const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivEl
     const classes = usePieStyles_unstable(props);
     const pieForFocusRing = d3Pie()
       .sort(null)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .value((d: any) => d.data)
       .padAngle(0);
 
@@ -45,9 +44,8 @@ export const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivEl
       return totalValue;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function arcGenerator(d: any, i: number, focusData: any, href?: string): JSX.Element {
-      const color = d && d.data && d.data.color;
+    function arcGenerator(d: PieArcDatum<ChartDataPoint>, i: number, focusData: any, href?: string): JSX.Element {
+      const gradient = d.data.gradient ?? getNextGradient(i, 0);
       return (
         <Arc
           key={i}
@@ -55,7 +53,7 @@ export const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivEl
           focusData={focusData}
           innerRadius={props.innerRadius}
           outerRadius={props.outerRadius}
-          color={color!}
+          gradient={gradient}
           onFocusCallback={_focusCallback}
           hoverOnCallback={_hoverCallback}
           onBlurCallback={props.onBlurCallback}
@@ -78,7 +76,6 @@ export const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivEl
 
     const piechart = d3Pie<ChartDataPoint>()
       .sort(null)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .value((d: any) => d.data)
       .padAngle(0.02)(data);
     const translate = `translate(${props.width / 2}, ${props.height / 2})`;
@@ -87,7 +84,7 @@ export const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivEl
 
     return (
       <g transform={translate}>
-        {piechart.map((d: any, i: number) => arcGenerator(d, i, focusData[i], props.href))}
+        {piechart.map((d: PieArcDatum<ChartDataPoint>, i: number) => arcGenerator(d, i, focusData[i], props.href))}
         {props.valueInsideDonut && (
           <text y={5} textAnchor="middle" dominantBaseline="middle" className={classes.insideDonutString}>
             {props.valueInsideDonut}

From eef1cf2d2d00b5a9c9ab436a54ad6a59237dae59 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Thu, 21 Nov 2024 02:02:13 +0000
Subject: [PATCH 05/19] test: update DonutChart tests to use gradient instead
 of color

---
 .../components/DonutChart/DonutChart.test.tsx |  7 +++---
 .../DonutChart/DonutChartRTL.test.tsx         | 22 +++++++++----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.test.tsx b/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.test.tsx
index 275753a89d26a..f1c7436b60757 100644
--- a/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.test.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.test.tsx
@@ -21,7 +21,6 @@ function sharedAfterEach() {
 
   // Do this after unmounting the wrapper to make sure if any timers cleaned up on unmount are
   // cleaned up in fake timers world
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   if ((global.setTimeout as any).mock) {
     jest.useRealTimers();
   }
@@ -56,8 +55,8 @@ describe('DonutChart snapShot testing', () => {
   });
 
   it('renders DonutChart correctly without color points', () => {
-    const chartPointColor = pointsDC[0].color;
-    delete pointsDC[0].color;
+    const chartPointColor = pointsDC[0].gradient;
+    delete pointsDC[0].gradient;
 
     let component: any;
     rendererAct(() => {
@@ -65,7 +64,7 @@ describe('DonutChart snapShot testing', () => {
     });
     const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
-    pointsDC[0].color = chartPointColor;
+    pointsDC[0].gradient = chartPointColor;
   });
 
   it('renders hideLegend correctly', () => {
diff --git a/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChartRTL.test.tsx
index 05df7d405f643..c113a3c1a87d1 100644
--- a/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChartRTL.test.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChartRTL.test.tsx
@@ -80,9 +80,9 @@ describe('Donut chart interactions', () => {
     fireEvent.mouseOver(legend!);
 
     // Assert
-    const getById = queryAllByAttribute.bind(null, 'id');
-    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
-    expect(getById(container, /Pie.*?third/i)[0]).toHaveAttribute('opacity', '0.1');
+    const getByClass = queryAllByAttribute.bind(null, 'class');
+    expect(getByClass(container, /fui-donut-arc__root/i)[1]).toHaveStyle('opacity: 0.1');
+    expect(getByClass(container, /fui-donut-arc__root/i)[2]).toHaveStyle('opacity: 0.1');
   });
 
   test('Should select legend on single mouse click on legends', () => {
@@ -95,8 +95,8 @@ describe('Donut chart interactions', () => {
     fireEvent.click(legend!);
 
     // Assert
-    const getById = queryAllByAttribute.bind(null, 'id');
-    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+    const getByClass = queryAllByAttribute.bind(null, 'class');
+    expect(getByClass(container, /fui-donut-arc__root/i)[1]).toHaveStyle('opacity: 0.1');
     const firstLegend = screen.queryByText('first')?.closest('button');
     expect(firstLegend).toHaveAttribute('aria-selected', 'true');
     expect(firstLegend).toHaveAttribute(
@@ -115,8 +115,8 @@ describe('Donut chart interactions', () => {
 
     //single click on first legend
     fireEvent.click(legend!);
-    const getById = queryAllByAttribute.bind(null, 'id');
-    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+    const getByClass = queryAllByAttribute.bind(null, 'class');
+    expect(getByClass(container, /fui-donut-arc__root/i)[1]).toHaveStyle('opacity: 0.1');
     const firstLegend = screen.queryByText('first')?.closest('button');
     expect(firstLegend).toHaveAttribute('aria-selected', 'true');
     expect(firstLegend).toHaveAttribute(
@@ -138,13 +138,13 @@ describe('Donut chart interactions', () => {
     const legend = screen.queryByText('first');
     expect(legend).toBeDefined();
     fireEvent.mouseOver(legend!);
-    const getById = queryAllByAttribute.bind(null, 'id');
-    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+    const getByClass = queryAllByAttribute.bind(null, 'class');
+    expect(getByClass(container, /fui-donut-arc__root/i)[1]).toHaveStyle('opacity: 0.1');
     fireEvent.mouseOut(legend!);
 
     // Assert
-    expect(getById(container, /Pie.*?first/i)[0]).toHaveAttribute('opacity', '1');
-    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '1');
+    expect(getByClass(container, /fui-donut-arc__root/i)[0]).toHaveStyle('opacity: 1');
+    expect(getByClass(container, /fui-donut-arc__root/i)[1]).toHaveStyle('opacity: 1');
   });
 
   test('Should display correct callout data on mouse move', async () => {

From 0c562b53e8fd7ecfa254da814315bb9c758b0ad9 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Thu, 21 Nov 2024 03:34:52 +0000
Subject: [PATCH 06/19] feat: add gradient support to HorizontalBarChart and
 update rendering logic

---
 .../HorizontalBarChart/HorizontalBarChart.tsx | 97 ++++++++++++-------
 1 file changed, 60 insertions(+), 37 deletions(-)

diff --git a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
index 36970b07a8832..fe0096409a891 100644
--- a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
@@ -2,9 +2,15 @@ import * as React from 'react';
 import { useHorizontalBarChartStyles_unstable } from './useHorizontalBarChartStyles.styles';
 import { ChartProps, HorizontalBarChartProps, ChartDataPoint, RefArrayData, HorizontalBarChartVariant } from './index';
 import { convertToLocaleString } from '../../utilities/locale-util';
-import { formatValueWithSIPrefix, getAccessibleDataObject, useRtl } from '../../utilities/index';
+import {
+  DataVizGradientPalette,
+  formatValueWithSIPrefix,
+  getAccessibleDataObject,
+  getGradientFromToken,
+  getNextGradient,
+  useRtl,
+} from '../../utilities/index';
 import { useId } from '@fluentui/react-utilities';
-import { tokens } from '@fluentui/react-theme';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { ChartPopover } from '../CommonComponents/ChartPopover';
 import { FocusableTooltipText } from '../../utilities/FocusableTooltipText';
@@ -27,6 +33,7 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
   const _isRTL: boolean = useRtl();
   const barChartSvgRef: React.RefObject<SVGSVGElement> = React.createRef<SVGSVGElement>();
   const _emptyChartId: string = useId('_HBC_empty');
+  const _gradientId = useId('HBC_Gradient');
 
   const [hoverValue, setHoverValue] = React.useState<string | number | Date | null>('');
   const [lineColor, setLineColor] = React.useState<string>('');
@@ -51,7 +58,7 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
       _calloutAnchorPoint = point;
       updatePosition(event.clientX, event.clientY);
       setHoverValue(hoverVal);
-      setLineColor(point.color!);
+      setLineColor(point.gradient![0]);
       setLegend(point.legend!);
       setXCalloutValue(point.xAxisCalloutData!);
       setYCalloutValue(point.yAxisCalloutData!);
@@ -141,18 +148,12 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
    * Extra margin is also provided, in the x value to provide some spacing in between the bars
    */
 
-  function _createBars(data: ChartProps): JSX.Element[] {
+  function _createBars(data: ChartProps, dataPointIndex: number): JSX.Element[] {
     const noOfBars =
       data.chartData?.reduce((count: number, point: ChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||
       1;
     const totalMarginPercent = barSpacingInPercent * (noOfBars - 1);
-    const defaultColors: string[] = [
-      tokens.colorPaletteBlueForeground2,
-      tokens.colorPaletteCornflowerForeground2,
-      tokens.colorPaletteDarkGreenForeground2,
-      tokens.colorPaletteNavyForeground2,
-      tokens.colorPaletteDarkOrangeForeground2,
-    ];
+
     // calculating starting point of each bar and it's range
     const startingPoint: number[] = [];
     const total = data.chartData!.reduce(
@@ -188,7 +189,6 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
     const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;
 
     const bars = data.chartData!.map((point: ChartDataPoint, index: number) => {
-      const color: string = point.color ? point.color : defaultColors[Math.floor(Math.random() * 4 + 1)];
       const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;
       if (index > 0) {
         prevPosition += value;
@@ -229,39 +229,58 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
         );
       }
 
+      const gradientId = _gradientId + `_${dataPointIndex}_${index}`;
+
       return (
-        <rect
-          key={index}
-          x={`${
-            _isRTL
-              ? 100 - startingPoint[index] - value - index * barSpacingInPercent
-              : startingPoint[index] + index * barSpacingInPercent
-          }%`}
-          y={0}
-          data-is-focusable={point.legend !== '' ? true : false}
-          width={value + '%'}
-          height={_barHeight}
-          fill={color}
-          onMouseOver={point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined}
-          onFocus={point.legend !== '' ? event => _hoverOn.bind(event, xValue, point) : undefined}
-          role="img"
-          aria-label={_getAriaLabel(point)}
-          onBlur={_hoverOff}
-          onMouseLeave={_hoverOff}
-          className={classes.barWrapper}
-          tabIndex={point.legend !== '' ? 0 : undefined}
-        />
+        <>
+          <defs>
+            <linearGradient id={gradientId}>
+              <stop offset="0" stopColor={point.gradient?.[0]} />
+              <stop offset="100%" stopColor={point.gradient?.[1]} />
+            </linearGradient>
+          </defs>
+          <rect
+            key={index}
+            x={`${
+              _isRTL
+                ? 100 - startingPoint[index] - value - index * barSpacingInPercent
+                : startingPoint[index] + index * barSpacingInPercent
+            }%`}
+            y={0}
+            rx={4}
+            data-is-focusable={point.legend !== '' ? true : false}
+            width={value + '%'}
+            height={_barHeight}
+            fill={`url(#${gradientId})`}
+            onMouseOver={point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined}
+            onFocus={point.legend !== '' ? event => _hoverOn.bind(event, xValue, point) : undefined}
+            role="img"
+            aria-label={_getAriaLabel(point)}
+            onBlur={_hoverOff}
+            onMouseLeave={_hoverOff}
+            className={classes.barWrapper}
+            tabIndex={point.legend !== '' ? 0 : undefined}
+          />
+        </>
       );
     });
     return bars;
   }
 
+  function _addDefaultGradients(dataPoints: ChartDataPoint[], chartDataIndex: number): ChartDataPoint[] {
+    return dataPoints
+      ? dataPoints.map((item, index) => {
+          return { ...item, gradient: item.gradient ?? getNextGradient(chartDataIndex, 0) };
+        })
+      : [];
+  }
+
   const _getAriaLabel = (point: ChartDataPoint): string => {
-    const legend = point.xAxisCalloutData || point.legend;
+    const pointLegend = point.xAxisCalloutData || point.legend;
     const yValue =
       point.yAxisCalloutData ||
       (point.horizontalBarChartdata ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.y}` : 0);
-    return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;
+    return point.callOutAccessibilityData?.ariaLabel || (pointLegend ? `${pointLegend}, ` : '') + `${yValue}.`;
   };
 
   function _isChartEmpty(): boolean {
@@ -296,9 +315,13 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
   const focusAttributes = useFocusableGroup();
 
   let datapoint: number | undefined = 0;
+
   return !_isChartEmpty() ? (
     <div className={classes.root} onMouseLeave={_handleChartMouseLeave}>
       {data!.map((points: ChartProps, index: number) => {
+        // Add default gradients if not present
+        points = { ...points, chartData: _addDefaultGradients(points.chartData!, index) };
+
         if (points.chartData && points.chartData![0] && points.chartData![0].horizontalBarChartdata!.x) {
           datapoint = points.chartData![0].horizontalBarChartdata!.x;
         } else {
@@ -310,13 +333,13 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
             x: points.chartData![0].horizontalBarChartdata!.y - datapoint!,
             y: points.chartData![0].horizontalBarChartdata!.y,
           },
-          color: tokens.colorBackgroundOverlay,
+          gradient: getGradientFromToken(DataVizGradientPalette.disabled),
         };
 
         // Hide right side text of chart title for absolute-scale variant
         const chartDataText =
           props.variant === HorizontalBarChartVariant.AbsoluteScale ? null : _getChartDataText(points!);
-        const bars = _createBars(points!);
+        const bars = _createBars(points!, index);
         const keyVal = _uniqLineText + '_' + index;
         // ToDo - Showtriangle property is per data series. How to account for it in the new stylesheet
         /*         const classes = useHorizontalBarChartStyles_unstable(props.styles!, {

From 2eb7d67eaec904270c10c8e56d5014d329ec729c Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Thu, 21 Nov 2024 03:41:22 +0000
Subject: [PATCH 07/19] refactor: replace color with gradient in
 HorizontalBarChart test cases

---
 .../HorizontalBarChart/HorizontalBarChart.test.tsx   |  4 ++--
 .../HorizontalBarChartRTL.test.tsx                   | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx
index 7728c38aae9e1..455a550e5dc81 100644
--- a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx
@@ -23,7 +23,7 @@ export const chartPoints: ChartProps[] = [
       {
         legend: 'one',
         horizontalBarChartdata: { x: 1543, y: 15000 },
-        color: '#004b50',
+        gradient: ['#004b50', ''],
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '94%',
       },
@@ -35,7 +35,7 @@ export const chartPoints: ChartProps[] = [
       {
         legend: 'two',
         horizontalBarChartdata: { x: 800, y: 15000 },
-        color: '#5c2d91',
+        gradient: ['#5c2d91', ''],
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '19%',
       },
diff --git a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx
index 6d179e187d2ef..23a55d2c16675 100644
--- a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx
@@ -15,7 +15,7 @@ const chartPoints: ChartProps[] = [
       {
         legend: 'one',
         horizontalBarChartdata: { x: 1543, y: 15000 },
-        color: '#004b50',
+        gradient: ['#004b50', ''],
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '10%',
       },
@@ -27,7 +27,7 @@ const chartPoints: ChartProps[] = [
       {
         legend: 'two',
         horizontalBarChartdata: { x: 800, y: 15000 },
-        color: '#5c2d91',
+        gradient: ['#5c2d91', ''],
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '5%',
       },
@@ -39,7 +39,7 @@ const chartPoints: ChartProps[] = [
       {
         legend: 'three',
         horizontalBarChartdata: { x: 8888, y: 15000 },
-        color: '#a4262c',
+        gradient: ['#a4262c', ''],
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '59%',
       },
@@ -50,15 +50,15 @@ const chartPoints: ChartProps[] = [
 const chartPointsWithBenchMark: ChartProps[] = [
   {
     chartTitle: 'one',
-    chartData: [{ legend: 'one', data: 50, horizontalBarChartdata: { x: 10, y: 100 }, color: '#004b50' }],
+    chartData: [{ legend: 'one', data: 50, horizontalBarChartdata: { x: 10, y: 100 }, gradient: ['#004b50', ''] }],
   },
   {
     chartTitle: 'two',
-    chartData: [{ legend: 'two', data: 30, horizontalBarChartdata: { x: 30, y: 200 }, color: '#5c2d91' }],
+    chartData: [{ legend: 'two', data: 30, horizontalBarChartdata: { x: 30, y: 200 }, gradient: ['#5c2d91', ''] }],
   },
   {
     chartTitle: 'three',
-    chartData: [{ legend: 'three', data: 5, horizontalBarChartdata: { x: 15, y: 50 }, color: '#a4262c' }],
+    chartData: [{ legend: 'three', data: 5, horizontalBarChartdata: { x: 15, y: 50 }, gradient: ['#a4262c', ''] }],
   },
 ];
 

From 942d9a3ab8a6b0672a4674109a041494677d0d45 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Thu, 21 Nov 2024 03:53:42 +0000
Subject: [PATCH 08/19] build: update charts api readme

---
 .../library/etc/react-charts-preview.api.md   | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/charts/react-charts-preview/library/etc/react-charts-preview.api.md b/packages/charts/react-charts-preview/library/etc/react-charts-preview.api.md
index d4db2bfe732f1..cb26806ccb0b0 100644
--- a/packages/charts/react-charts-preview/library/etc/react-charts-preview.api.md
+++ b/packages/charts/react-charts-preview/library/etc/react-charts-preview.api.md
@@ -164,8 +164,8 @@ export type ChartDataMode = 'default' | 'fraction' | 'percentage';
 // @public (undocumented)
 export interface ChartDataPoint {
     callOutAccessibilityData?: AccessibilityProps;
-    color?: string;
     data?: number;
+    gradient?: [string, string];
     horizontalBarChartdata?: HorizontalDataPoint;
     legend?: string;
     onClick?: VoidFunction;
@@ -304,6 +304,36 @@ export interface DataPoint {
     y: number;
 }
 
+// @public (undocumented)
+export const DataVizGradientPalette: {
+    gradient1: string;
+    gradient2: string;
+    gradient3: string;
+    gradient4: string;
+    gradient5: string;
+    gradient6: string;
+    gradient7: string;
+    gradient8: string;
+    gradient9: string;
+    gradient10: string;
+    gradient1Ext: string;
+    gradient2Ext: string;
+    gradient3Ext: string;
+    gradient4Ext: string;
+    gradient5Ext: string;
+    gradient6Ext: string;
+    gradient7Ext: string;
+    gradient8Ext: string;
+    gradient9Ext: string;
+    gradient10Ext: string;
+    success: string;
+    highSuccess: string;
+    warning: string;
+    error: string;
+    highError: string;
+    disabled: string;
+};
+
 // @public (undocumented)
 export const DataVizPalette: {
     color1: string;
@@ -403,9 +433,15 @@ export interface EventsAnnotationProps {
 // @public (undocumented)
 export const getColorFromToken: (token: string, isDarkTheme?: boolean) => string;
 
+// @public (undocumented)
+export const getGradientFromToken: (token: string, isDarkTheme?: boolean) => [string, string];
+
 // @public (undocumented)
 export const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string;
 
+// @public (undocumented)
+export const getNextGradient: (index: number, offset?: number, isDarkTheme?: boolean) => [string, string];
+
 // @public (undocumented)
 export interface GroupedVerticalBarChartData {
     name: string;

From d3cc0db6a8c2c1edaec55ff66ae59001ece0caa8 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Thu, 21 Nov 2024 03:57:01 +0000
Subject: [PATCH 09/19] add update-snapshots script to package.json

---
 packages/charts/react-charts-preview/library/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/charts/react-charts-preview/library/package.json b/packages/charts/react-charts-preview/library/package.json
index 0075f985ec4b4..d2ce771d4b995 100644
--- a/packages/charts/react-charts-preview/library/package.json
+++ b/packages/charts/react-charts-preview/library/package.json
@@ -24,6 +24,7 @@
     "start": "yarn storybook",
     "storybook": "yarn --cwd ../stories storybook",
     "test": "jest --passWithNoTests",
+    "update-snapshots": "jest -u",
     "type-check": "just-scripts type-check"
   },
   "syncpack": {

From 5d900392bb155070b00f005b6a346b15c7ca719b Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Thu, 21 Nov 2024 07:02:13 +0000
Subject: [PATCH 10/19] update tests and test snapshot

---
 .../src/components/DonutChart/Arc/Arc.tsx     |    1 -
 .../__snapshots__/DonutChart.test.tsx.snap    | 1300 ++++++++++++++---
 .../__snapshots__/DonutChartRTL.test.tsx.snap |  162 +-
 .../HorizontalBarChart/HorizontalBarChart.tsx |    6 +-
 .../HorizontalBarChartRTL.test.tsx            |   19 +-
 .../HorizontalBarChart.test.tsx.snap          |  212 ++-
 .../HorizontalBarChartRTL.test.tsx.snap       |  524 ++++++-
 7 files changed, 1942 insertions(+), 282 deletions(-)

diff --git a/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx b/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx
index 84b4f622da8eb..3116770b8d236 100644
--- a/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx
@@ -116,7 +116,6 @@ export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivEl
           // TODO innerradius and outerradius were absent
           id={id}
           d={pathData}
-          className={classes.root}
           style={{ fill: 'transparent', cursor: href ? 'pointer' : 'default' }}
           onFocus={_onFocus.bind(this, props.data!.data, id)}
           data-is-focusable={props.activeArc === props.data!.data.legend || props.activeArc === ''}
diff --git a/packages/charts/react-charts-preview/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/charts/react-charts-preview/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
index 7781311e1edd2..ad49bb3c68d14 100644
--- a/packages/charts/react-charts-preview/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
+++ b/packages/charts/react-charts-preview/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
@@ -30,75 +30,159 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
           <g>
             <path
               aria-label="2020/04/30, 20000."
-              className="fui-donut-arc__root"
-              d="M0.55,-54.997A55,55,0,0,1,51.396,-19.582L0,0Z"
+              d="M0.497,-49.747A5,5,0,0,1,6.047,-54.667A55,55,0,0,1,49.18,-24.624A5,5,0,0,1,46.489,-17.713L0,0Z"
               data-is-focusable={true}
-              id="_Pie_42first20000"
+              id="_Pie_84first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#E5E5E5",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip85#E5E5E5_"
+            >
+              <path
+                d="M0.497,-49.747A5,5,0,0,1,6.047,-54.667A55,55,0,0,1,49.18,-24.624A5,5,0,0,1,46.489,-17.713L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip85#E5E5E5_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 0rad,
+      #E5E5E5,
+       1.2167664052268437rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/20, 39000."
-              className="fui-donut-arc__root"
-              d="M51.777,-18.551A55,55,0,0,1,-22.37,50.245L0,0Z"
+              d="M46.834,-16.78A5,5,0,0,1,53.373,-13.28A55,55,0,0,1,-17.233,52.23A5,5,0,0,1,-20.234,45.449L0,0Z"
               data-is-focusable={true}
-              id="_Pie_42second39000"
+              id="_Pie_84second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#0078D4",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip86#0078D4_"
+            >
+              <path
+                d="M46.834,-16.78A5,5,0,0,1,53.373,-13.28A55,55,0,0,1,-17.233,52.23A5,5,0,0,1,-20.234,45.449L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip86#0078D4_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 1.2167664052268437rad,
+      #0078D4,
+       3.5704608954191888rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/25, 45000."
-              className="fui-donut-arc__root"
-              d="M-23.37,49.788A55,55,0,0,1,-0.55,-54.997L0,0Z"
+              d="M-21.139,45.035A5,5,0,0,1,-28.232,47.201A55,55,0,0,1,-6.047,-54.667A5,5,0,0,1,-0.497,-49.747L0,0Z"
               data-is-focusable={true}
-              id="_Pie_42third45000"
+              id="_Pie_84third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#DADADA",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip87#DADADA_"
+            >
+              <path
+                d="M-21.139,45.035A5,5,0,0,1,-28.232,47.201A55,55,0,0,1,-6.047,-54.667A5,5,0,0,1,-0.497,-49.747L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip87#DADADA_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 3.5704608954191888rad,
+      #DADADA,
+       6.283185307179586rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
         </g>
       </svg>
     </div>
     <div
       className="fui-cart__calloutContainer"
-      id="callout43"
+      id="callout88"
     >
       <div
         className="fui-PopoverSurface"
@@ -338,75 +422,159 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
           <g>
             <path
               aria-label="2020/04/30, 20000."
-              className="fui-donut-arc__root"
-              d="M0.55,-54.997A55,55,0,0,1,51.396,-19.582L0,0Z"
+              d="M0.497,-49.747A5,5,0,0,1,6.047,-54.667A55,55,0,0,1,49.18,-24.624A5,5,0,0,1,46.489,-17.713L0,0Z"
               data-is-focusable={true}
-              id="_Pie_50first20000"
+              id="_Pie_98first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#E5E5E5",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip99#E5E5E5_"
+            >
+              <path
+                d="M0.497,-49.747A5,5,0,0,1,6.047,-54.667A55,55,0,0,1,49.18,-24.624A5,5,0,0,1,46.489,-17.713L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip99#E5E5E5_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 0rad,
+      #E5E5E5,
+       1.2167664052268437rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/20, 39000."
-              className="fui-donut-arc__root"
-              d="M51.777,-18.551A55,55,0,0,1,-22.37,50.245L0,0Z"
+              d="M46.834,-16.78A5,5,0,0,1,53.373,-13.28A55,55,0,0,1,-17.233,52.23A5,5,0,0,1,-20.234,45.449L0,0Z"
               data-is-focusable={true}
-              id="_Pie_50second39000"
+              id="_Pie_98second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#0078D4",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip100#0078D4_"
+            >
+              <path
+                d="M46.834,-16.78A5,5,0,0,1,53.373,-13.28A55,55,0,0,1,-17.233,52.23A5,5,0,0,1,-20.234,45.449L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip100#0078D4_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 1.2167664052268437rad,
+      #0078D4,
+       3.5704608954191888rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/25, 45000."
-              className="fui-donut-arc__root"
-              d="M-23.37,49.788A55,55,0,0,1,-0.55,-54.997L0,0Z"
+              d="M-21.139,45.035A5,5,0,0,1,-28.232,47.201A55,55,0,0,1,-6.047,-54.667A5,5,0,0,1,-0.497,-49.747L0,0Z"
               data-is-focusable={true}
-              id="_Pie_50third45000"
+              id="_Pie_98third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#DADADA",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip101#DADADA_"
+            >
+              <path
+                d="M-21.139,45.035A5,5,0,0,1,-28.232,47.201A55,55,0,0,1,-6.047,-54.667A5,5,0,0,1,-0.497,-49.747L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip101#DADADA_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 3.5704608954191888rad,
+      #DADADA,
+       6.283185307179586rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
         </g>
       </svg>
     </div>
     <div
       className="fui-cart__calloutContainer"
-      id="callout51"
+      id="callout102"
     >
       <div
         className="fui-PopoverSurface"
@@ -646,75 +814,159 @@ exports[`DonutChart snapShot testing Should elevate all smaller values to minimu
           <g>
             <path
               aria-label="2020/04/30, 20000."
-              className="fui-donut-arc__root"
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
               data-is-focusable={true}
-              id="_Pie_24first20000"
+              id="_Pie_48first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#E5E5E5",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip49#E5E5E5_"
+            >
+              <path
+                d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip49#E5E5E5_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 0rad,
+      #E5E5E5,
+       1.2167664052268437rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/20, 39000."
-              className="fui-donut-arc__root"
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
               data-is-focusable={true}
-              id="_Pie_24second39000"
+              id="_Pie_48second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#0078D4",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip50#0078D4_"
+            >
+              <path
+                d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip50#0078D4_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 1.2167664052268437rad,
+      #0078D4,
+       3.5704608954191888rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/25, 45000."
-              className="fui-donut-arc__root"
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
               data-is-focusable={true}
-              id="_Pie_24third45000"
+              id="_Pie_48third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#DADADA",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip51#DADADA_"
+            >
+              <path
+                d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip51#DADADA_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 3.5704608954191888rad,
+      #DADADA,
+       6.283185307179586rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
         </g>
       </svg>
     </div>
     <div
       className="fui-cart__calloutContainer"
-      id="callout25"
+      id="callout52"
     />
     <div
       className="fui-donut__legendContainer"
@@ -903,24 +1155,52 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
           <g>
             <path
               aria-label="2020/04/30, 20000."
-              className="fui-donut-arc__root"
-              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
+              d="M0.548,-54.77A5,5,0,0,1,6.052,-59.694A60,60,0,0,1,53.894,-26.371A5,5,0,0,1,51.183,-19.501L0,0Z"
               data-is-focusable={true}
-              id="_Pie_18first20000"
+              id="_Pie_36first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#E5E5E5",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip37#E5E5E5_"
+            >
+              <path
+                d="M0.548,-54.77A5,5,0,0,1,6.052,-59.694A60,60,0,0,1,53.894,-26.371A5,5,0,0,1,51.183,-19.501L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip37#E5E5E5_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 0rad,
+      #E5E5E5,
+       1.2167664052268437rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
             <text
               aria-hidden={true}
               className="fui-donut-arc__arcLabel"
@@ -935,24 +1215,52 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
           <g>
             <path
               aria-label="2020/04/20, 39000."
-              className="fui-donut-arc__root"
-              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
+              d="M51.563,-18.474A5,5,0,0,1,58.09,-15.018A60,60,0,0,1,-19.32,56.805A5,5,0,0,1,-22.277,50.037L0,0Z"
               data-is-focusable={true}
-              id="_Pie_18second39000"
+              id="_Pie_36second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#0078D4",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip38#0078D4_"
+            >
+              <path
+                d="M51.563,-18.474A5,5,0,0,1,58.09,-15.018A60,60,0,0,1,-19.32,56.805A5,5,0,0,1,-22.277,50.037L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip38#0078D4_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 1.2167664052268437rad,
+      #0078D4,
+       3.5704608954191888rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
             <text
               aria-hidden={true}
               className="fui-donut-arc__arcLabel"
@@ -967,24 +1275,52 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
           <g>
             <path
               aria-label="2020/04/25, 45000."
-              className="fui-donut-arc__root"
-              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
+              d="M-23.274,49.582A5,5,0,0,1,-30.327,51.771A60,60,0,0,1,-6.052,-59.694A5,5,0,0,1,-0.548,-54.77L0,0Z"
               data-is-focusable={true}
-              id="_Pie_18third45000"
+              id="_Pie_36third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#DADADA",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip39#DADADA_"
+            >
+              <path
+                d="M-23.274,49.582A5,5,0,0,1,-30.327,51.771A60,60,0,0,1,-6.052,-59.694A5,5,0,0,1,-0.548,-54.77L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip39#DADADA_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 3.5704608954191888rad,
+      #DADADA,
+       6.283185307179586rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
             <text
               aria-hidden={true}
               className="fui-donut-arc__arcLabel"
@@ -1001,7 +1337,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
     </div>
     <div
       className="fui-cart__calloutContainer"
-      id="callout19"
+      id="callout40"
     />
     <div
       className="fui-donut__legendContainer"
@@ -1190,24 +1526,52 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
           <g>
             <path
               aria-label="2020/04/30, 20000."
-              className="fui-donut-arc__root"
-              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
+              d="M0.548,-54.77A5,5,0,0,1,6.052,-59.694A60,60,0,0,1,53.894,-26.371A5,5,0,0,1,51.183,-19.501L0,0Z"
               data-is-focusable={true}
-              id="_Pie_21first20000"
+              id="_Pie_42first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#E5E5E5",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip43#E5E5E5_"
+            >
+              <path
+                d="M0.548,-54.77A5,5,0,0,1,6.052,-59.694A60,60,0,0,1,53.894,-26.371A5,5,0,0,1,51.183,-19.501L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip43#E5E5E5_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 0rad,
+      #E5E5E5,
+       1.2167664052268437rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
             <text
               aria-hidden={true}
               className="fui-donut-arc__arcLabel"
@@ -1222,24 +1586,52 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
           <g>
             <path
               aria-label="2020/04/20, 39000."
-              className="fui-donut-arc__root"
-              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
+              d="M51.563,-18.474A5,5,0,0,1,58.09,-15.018A60,60,0,0,1,-19.32,56.805A5,5,0,0,1,-22.277,50.037L0,0Z"
               data-is-focusable={true}
-              id="_Pie_21second39000"
+              id="_Pie_42second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#0078D4",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip44#0078D4_"
+            >
+              <path
+                d="M51.563,-18.474A5,5,0,0,1,58.09,-15.018A60,60,0,0,1,-19.32,56.805A5,5,0,0,1,-22.277,50.037L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip44#0078D4_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 1.2167664052268437rad,
+      #0078D4,
+       3.5704608954191888rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
             <text
               aria-hidden={true}
               className="fui-donut-arc__arcLabel"
@@ -1254,24 +1646,52 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
           <g>
             <path
               aria-label="2020/04/25, 45000."
-              className="fui-donut-arc__root"
-              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
+              d="M-23.274,49.582A5,5,0,0,1,-30.327,51.771A60,60,0,0,1,-6.052,-59.694A5,5,0,0,1,-0.548,-54.77L0,0Z"
               data-is-focusable={true}
-              id="_Pie_21third45000"
+              id="_Pie_42third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#DADADA",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip45#DADADA_"
+            >
+              <path
+                d="M-23.274,49.582A5,5,0,0,1,-30.327,51.771A60,60,0,0,1,-6.052,-59.694A5,5,0,0,1,-0.548,-54.77L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip45#DADADA_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 3.5704608954191888rad,
+      #DADADA,
+       6.283185307179586rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
             <text
               aria-hidden={true}
               className="fui-donut-arc__arcLabel"
@@ -1288,7 +1708,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
     </div>
     <div
       className="fui-cart__calloutContainer"
-      id="callout22"
+      id="callout46"
     />
     <div
       className="fui-donut__legendContainer"
@@ -1477,8 +1897,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
           <g>
             <path
               aria-label="2020/04/30, 20000."
-              className="fui-donut-arc__root"
-              d="M1.141,-99.993A100,100,0,0,1,93.397,-35.736L51.182,-20.134A55,55,0,0,0,1.141,-54.988Z"
+              d="M1.141,-94.801A5,5,0,0,1,6.464,-99.791A100,100,0,0,1,91.361,-40.659A5,5,0,0,1,88.526,-33.936L55.588,-21.762A5,5,0,0,1,49.367,-24.248A55,55,0,0,0,5.629,-54.711A5,5,0,0,1,1.141,-59.685Z"
               data-is-focusable={true}
               id="_Pie_1first20000"
               onBlur={[Function]}
@@ -1486,21 +1905,49 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#E5E5E5",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip2#E5E5E5_"
+            >
+              <path
+                d="M1.141,-94.801A5,5,0,0,1,6.464,-99.791A100,100,0,0,1,91.361,-40.659A5,5,0,0,1,88.526,-33.936L55.588,-21.762A5,5,0,0,1,49.367,-24.248A55,55,0,0,0,5.629,-54.711A5,5,0,0,1,1.141,-59.685Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip2#E5E5E5_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 0rad,
+      #E5E5E5,
+       1.2167664052268437rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/20, 39000."
-              className="fui-donut-arc__root"
-              d="M94.188,-33.595A100,100,0,0,1,-40.544,91.412L-21.828,50.483A55,55,0,0,0,51.974,-17.993Z"
+              d="M89.318,-31.795A5,5,0,0,1,95.843,-28.532A100,100,0,0,1,-35.618,93.442A5,5,0,0,1,-38.384,86.69L-23.782,54.754A5,5,0,0,1,-17.632,52.097A55,55,0,0,0,53.27,-13.687A5,5,0,0,1,56.379,-19.621Z"
               data-is-focusable={true}
               id="_Pie_1second39000"
               onBlur={[Function]}
@@ -1508,21 +1955,49 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#0078D4",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip3#0078D4_"
+            >
+              <path
+                d="M89.318,-31.795A5,5,0,0,1,95.843,-28.532A100,100,0,0,1,-35.618,93.442A5,5,0,0,1,-38.384,86.69L-23.782,54.754A5,5,0,0,1,-17.632,52.097A55,55,0,0,0,53.27,-13.687A5,5,0,0,1,56.379,-19.621Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip3#0078D4_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 1.2167664052268437rad,
+      #0078D4,
+       3.5704608954191888rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/25, 45000."
-              className="fui-donut-arc__root"
-              d="M-42.619,90.463A100,100,0,0,1,-1.141,-99.993L-1.141,-54.988A55,55,0,0,0,-23.904,49.534Z"
+              d="M-40.46,85.741A5,5,0,0,1,-47.376,88.065A100,100,0,0,1,-6.464,-99.791A5,5,0,0,1,-1.141,-94.801L-1.141,-59.685A5,5,0,0,1,-5.629,-54.711A55,55,0,0,0,-27.871,47.415A5,5,0,0,1,-25.857,53.805Z"
               data-is-focusable={true}
               id="_Pie_1third45000"
               onBlur={[Function]}
@@ -1530,22 +2005,51 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#DADADA",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip4#DADADA_"
+            >
+              <path
+                d="M-40.46,85.741A5,5,0,0,1,-47.376,88.065A100,100,0,0,1,-6.464,-99.791A5,5,0,0,1,-1.141,-94.801L-1.141,-59.685A5,5,0,0,1,-5.629,-54.711A55,55,0,0,0,-27.871,47.415A5,5,0,0,1,-25.857,53.805Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip4#DADADA_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 3.5704608954191888rad,
+      #DADADA,
+       6.283185307179586rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
         </g>
       </svg>
     </div>
     <div
       className="fui-cart__calloutContainer"
-      id="callout2"
+      id="callout5"
     />
     <div
       className="fui-donut__legendContainer"
@@ -1734,75 +2238,159 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
           <g>
             <path
               aria-label="2020/04/30, 20000."
-              className="fui-donut-arc__root"
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
               data-is-focusable={true}
-              id="_Pie_4first20000"
+              id="_Pie_7first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": undefined,
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip8#4760D5_#637CEF"
+            >
+              <path
+                d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip8#4760D5_#637CEF)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 0rad,
+      #4760D5,
+      #637CEF 1.2167664052268437rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/20, 39000."
-              className="fui-donut-arc__root"
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
               data-is-focusable={true}
-              id="_Pie_4second39000"
+              id="_Pie_7second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": undefined,
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip9#795AA6_#9373C0"
+            >
+              <path
+                d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip9#795AA6_#9373C0)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 1.2167664052268437rad,
+      #795AA6,
+      #9373C0 3.5704608954191888rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/25, 45000."
-              className="fui-donut-arc__root"
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
               data-is-focusable={true}
-              id="_Pie_4third45000"
+              id="_Pie_7third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": undefined,
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip10#159195_#2AA0A4"
+            >
+              <path
+                d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip10#159195_#2AA0A4)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 3.5704608954191888rad,
+      #159195,
+      #2AA0A4 6.283185307179586rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
         </g>
       </svg>
     </div>
     <div
       className="fui-cart__calloutContainer"
-      id="callout5"
+      id="callout11"
     />
     <div
       className="fui-donut__legendContainer"
@@ -1834,8 +2422,8 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
             role="option"
             style={
               Object {
-                "--rect-backgroundColor": undefined,
-                "--rect-borderColor": "var(--colorNeutralStroke1)",
+                "--rect-backgroundColor": "#4760D5",
+                "--rect-borderColor": "#4760D5",
                 "--rect-content": "",
                 "--rect-height": "12px",
               }
@@ -1846,10 +2434,10 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
               className="fui-legend__rect"
               style={
                 Object {
-                  "--rect-content-high-contrast": "linear-gradient(to right, undefined, undefined)",
+                  "--rect-content-high-contrast": "linear-gradient(to right, #4760D5, #4760D5)",
                   "--rect-opacity-high-contrast": "",
-                  "backgroundColor": undefined,
-                  "borderColor": "var(--colorNeutralStroke1)",
+                  "backgroundColor": "#4760D5",
+                  "borderColor": "#4760D5",
                   "content": "",
                   "height": "12px",
                 }
@@ -1878,8 +2466,8 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
             role="option"
             style={
               Object {
-                "--rect-backgroundColor": undefined,
-                "--rect-borderColor": "var(--colorNeutralStroke1)",
+                "--rect-backgroundColor": "#795AA6",
+                "--rect-borderColor": "#795AA6",
                 "--rect-content": "",
                 "--rect-height": "12px",
               }
@@ -1890,10 +2478,10 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
               className="fui-legend__rect"
               style={
                 Object {
-                  "--rect-content-high-contrast": "linear-gradient(to right, undefined, undefined)",
+                  "--rect-content-high-contrast": "linear-gradient(to right, #795AA6, #795AA6)",
                   "--rect-opacity-high-contrast": "",
-                  "backgroundColor": undefined,
-                  "borderColor": "var(--colorNeutralStroke1)",
+                  "backgroundColor": "#795AA6",
+                  "borderColor": "#795AA6",
                   "content": "",
                   "height": "12px",
                 }
@@ -1922,8 +2510,8 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
             role="option"
             style={
               Object {
-                "--rect-backgroundColor": undefined,
-                "--rect-borderColor": "var(--colorNeutralStroke1)",
+                "--rect-backgroundColor": "#159195",
+                "--rect-borderColor": "#159195",
                 "--rect-content": "",
                 "--rect-height": "12px",
               }
@@ -1934,10 +2522,10 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
               className="fui-legend__rect"
               style={
                 Object {
-                  "--rect-content-high-contrast": "linear-gradient(to right, undefined, undefined)",
+                  "--rect-content-high-contrast": "linear-gradient(to right, #159195, #159195)",
                   "--rect-opacity-high-contrast": "",
-                  "backgroundColor": undefined,
-                  "borderColor": "var(--colorNeutralStroke1)",
+                  "backgroundColor": "#159195",
+                  "borderColor": "#159195",
                   "content": "",
                   "height": "12px",
                 }
@@ -1991,75 +2579,159 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
           <g>
             <path
               aria-label="2020/04/30, 20000."
-              className="fui-donut-arc__root"
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12first20000"
+              id="_Pie_24first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#E5E5E5",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip25#E5E5E5_"
+            >
+              <path
+                d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip25#E5E5E5_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 0rad,
+      #E5E5E5,
+       1.2167664052268437rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/20, 39000."
-              className="fui-donut-arc__root"
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12second39000"
+              id="_Pie_24second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#0078D4",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip26#0078D4_"
+            >
+              <path
+                d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip26#0078D4_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 1.2167664052268437rad,
+      #0078D4,
+       3.5704608954191888rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/25, 45000."
-              className="fui-donut-arc__root"
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12third45000"
+              id="_Pie_24third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#DADADA",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip27#DADADA_"
+            >
+              <path
+                d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip27#DADADA_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 3.5704608954191888rad,
+      #DADADA,
+       6.283185307179586rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
         </g>
       </svg>
     </div>
     <div
       className="fui-cart__calloutContainer"
-      id="callout13"
+      id="callout28"
     />
     <div
       className="fui-donut__legendContainer"
@@ -2248,75 +2920,159 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
           <g>
             <path
               aria-label="2020/04/30, 20000."
-              className="fui-donut-arc__root"
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
               data-is-focusable={true}
-              id="_Pie_7first20000"
+              id="_Pie_13first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#E5E5E5",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip14#E5E5E5_"
+            >
+              <path
+                d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip14#E5E5E5_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 0rad,
+      #E5E5E5,
+       1.2167664052268437rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/20, 39000."
-              className="fui-donut-arc__root"
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
               data-is-focusable={true}
-              id="_Pie_7second39000"
+              id="_Pie_13second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#0078D4",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip15#0078D4_"
+            >
+              <path
+                d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip15#0078D4_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 1.2167664052268437rad,
+      #0078D4,
+       3.5704608954191888rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/25, 45000."
-              className="fui-donut-arc__root"
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
               data-is-focusable={true}
-              id="_Pie_7third45000"
+              id="_Pie_13third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#DADADA",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip16#DADADA_"
+            >
+              <path
+                d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip16#DADADA_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 3.5704608954191888rad,
+      #DADADA,
+       6.283185307179586rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
         </g>
       </svg>
     </div>
     <div
       className="fui-cart__calloutContainer"
-      id="callout8"
+      id="callout17"
     />
   </div>
 </div>
@@ -2352,75 +3108,159 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
           <g>
             <path
               aria-label="2020/04/30, 20000."
-              className="fui-donut-arc__root"
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
               data-is-focusable={true}
-              id="_Pie_9first20000"
+              id="_Pie_18first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#E5E5E5",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip19#E5E5E5_"
+            >
+              <path
+                d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip19#E5E5E5_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 0rad,
+      #E5E5E5,
+       1.2167664052268437rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/20, 39000."
-              className="fui-donut-arc__root"
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
               data-is-focusable={true}
-              id="_Pie_9second39000"
+              id="_Pie_18second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#0078D4",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip20#0078D4_"
+            >
+              <path
+                d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip20#0078D4_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 1.2167664052268437rad,
+      #0078D4,
+       3.5704608954191888rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/25, 45000."
-              className="fui-donut-arc__root"
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
               data-is-focusable={true}
-              id="_Pie_9third45000"
+              id="_Pie_18third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#DADADA",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip21#DADADA_"
+            >
+              <path
+                d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip21#DADADA_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 3.5704608954191888rad,
+      #DADADA,
+       6.283185307179586rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
         </g>
       </svg>
     </div>
     <div
       className="fui-cart__calloutContainer"
-      id="callout10"
+      id="callout22"
     />
     <div
       className="fui-donut__legendContainer"
@@ -2609,68 +3449,152 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
           <g>
             <path
               aria-label="2020/04/30, 20000."
-              className="fui-donut-arc__root"
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
               data-is-focusable={true}
-              id="_Pie_15first20000"
+              id="_Pie_30first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#E5E5E5",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip31#E5E5E5_"
+            >
+              <path
+                d="M0.949,-94.864A5,5,0,0,1,6.261,-99.804A100,100,0,0,1,91.444,-40.473A5,5,0,0,1,88.652,-33.777L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip31#E5E5E5_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 0rad,
+      #E5E5E5,
+       1.2167664052268437rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/20, 39000."
-              className="fui-donut-arc__root"
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
               data-is-focusable={true}
-              id="_Pie_15second39000"
+              id="_Pie_30second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#0078D4",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip32#0078D4_"
+            >
+              <path
+                d="M89.309,-31.998A5,5,0,0,1,95.785,-28.727A100,100,0,0,1,-35.808,93.369A5,5,0,0,1,-38.585,86.667L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip32#0078D4_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 1.2167664052268437rad,
+      #0078D4,
+       3.5704608954191888rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <g>
             <path
               aria-label="2020/04/25, 45000."
-              className="fui-donut-arc__root"
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
               data-is-focusable={true}
-              id="_Pie_15third45000"
+              id="_Pie_30third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={1}
               role="img"
               style={
                 Object {
                   "cursor": "default",
-                  "fill": "#DADADA",
+                  "fill": "transparent",
                 }
               }
             />
+            <clipPath
+              id="Arc_clip33#DADADA_"
+            >
+              <path
+                d="M-40.311,85.878A5,5,0,0,1,-47.197,88.161A100,100,0,0,1,-6.261,-99.804A5,5,0,0,1,-0.949,-94.864L0,0Z"
+              />
+            </clipPath>
+            <foreignObject
+              clipPath="url(#Arc_clip33#DADADA_)"
+              height="100%"
+              width="100%"
+              x="-50%"
+              y="-50%"
+            >
+              <div
+                className="fui-donut-arc__root"
+                style={
+                  Object {
+                    "background": "conic-gradient(
+      from 3.5704608954191888rad,
+      #DADADA,
+       6.283185307179586rad
+    )",
+                    "height": "100%",
+                    "opacity": 1,
+                    "width": "100%",
+                  }
+                }
+              />
+            </foreignObject>
           </g>
           <text
             className="fui-donut-pie__insideDonutString"
@@ -2685,7 +3609,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
     </div>
     <div
       className="fui-cart__calloutContainer"
-      id="callout16"
+      id="callout34"
     />
     <div
       className="fui-donut__legendContainer"
diff --git a/packages/charts/react-charts-preview/library/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/charts/react-charts-preview/library/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
index 6b2a874b72a70..af996edca3e4a 100644
--- a/packages/charts/react-charts-preview/library/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
+++ b/packages/charts/react-charts-preview/library/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
@@ -24,45 +24,96 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
             <g>
               <path
                 aria-label="2020/04/30, 20000."
-                class="fui-donut-arc__root"
-                d="M0.55,-54.997A55,55,0,0,1,51.396,-19.582L0,0Z"
+                d="M0.497,-49.747A5,5,0,0,1,6.047,-54.667A55,55,0,0,1,49.18,-24.624A5,5,0,0,1,46.489,-17.713L0,0Z"
                 data-is-focusable="true"
                 id="_Pie_1first20000"
-                opacity="1"
                 role="img"
-                style="fill: #E5E5E5; cursor: default;"
+                style="fill: transparent; cursor: default;"
               />
+              <clippath
+                id="Arc_clip2#E5E5E5_"
+              >
+                <path
+                  d="M0.497,-49.747A5,5,0,0,1,6.047,-54.667A55,55,0,0,1,49.18,-24.624A5,5,0,0,1,46.489,-17.713L0,0Z"
+                />
+              </clippath>
+              <foreignobject
+                clip-path="url(#Arc_clip2#E5E5E5_)"
+                height="100%"
+                width="100%"
+                x="-50%"
+                y="-50%"
+              >
+                <div
+                  class="fui-donut-arc__root"
+                  style="width: 100%; height: 100%; opacity: 1;"
+                />
+              </foreignobject>
             </g>
             <g>
               <path
                 aria-label="2020/04/20, 39000."
-                class="fui-donut-arc__root"
-                d="M51.777,-18.551A55,55,0,0,1,-22.37,50.245L0,0Z"
+                d="M46.834,-16.78A5,5,0,0,1,53.373,-13.28A55,55,0,0,1,-17.233,52.23A5,5,0,0,1,-20.234,45.449L0,0Z"
                 data-is-focusable="true"
                 id="_Pie_1second39000"
-                opacity="1"
                 role="img"
-                style="fill: #0078D4; cursor: default;"
+                style="fill: transparent; cursor: default;"
               />
+              <clippath
+                id="Arc_clip3#0078D4_"
+              >
+                <path
+                  d="M46.834,-16.78A5,5,0,0,1,53.373,-13.28A55,55,0,0,1,-17.233,52.23A5,5,0,0,1,-20.234,45.449L0,0Z"
+                />
+              </clippath>
+              <foreignobject
+                clip-path="url(#Arc_clip3#0078D4_)"
+                height="100%"
+                width="100%"
+                x="-50%"
+                y="-50%"
+              >
+                <div
+                  class="fui-donut-arc__root"
+                  style="width: 100%; height: 100%; opacity: 1;"
+                />
+              </foreignobject>
             </g>
             <g>
               <path
                 aria-label="2020/04/25, 45000."
-                class="fui-donut-arc__root"
-                d="M-23.37,49.788A55,55,0,0,1,-0.55,-54.997L0,0Z"
+                d="M-21.139,45.035A5,5,0,0,1,-28.232,47.201A55,55,0,0,1,-6.047,-54.667A5,5,0,0,1,-0.497,-49.747L0,0Z"
                 data-is-focusable="true"
                 id="_Pie_1third45000"
-                opacity="1"
                 role="img"
-                style="fill: #DADADA; cursor: default;"
+                style="fill: transparent; cursor: default;"
               />
+              <clippath
+                id="Arc_clip4#DADADA_"
+              >
+                <path
+                  d="M-21.139,45.035A5,5,0,0,1,-28.232,47.201A55,55,0,0,1,-6.047,-54.667A5,5,0,0,1,-0.497,-49.747L0,0Z"
+                />
+              </clippath>
+              <foreignobject
+                clip-path="url(#Arc_clip4#DADADA_)"
+                height="100%"
+                width="100%"
+                x="-50%"
+                y="-50%"
+              >
+                <div
+                  class="fui-donut-arc__root"
+                  style="width: 100%; height: 100%; opacity: 1;"
+                />
+              </foreignobject>
             </g>
           </g>
         </svg>
       </div>
       <div
         class="fui-cart__calloutContainer"
-        id="callout2"
+        id="callout5"
       />
       <div
         class="fui-donut__legendContainer"
@@ -146,7 +197,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
 exports[`Donut chart interactions Should reflect theme change 1`] = `
 <div>
   <div
-    class="fui-FluentProvider fui-FluentProvider32"
+    class="fui-FluentProvider fui-FluentProvider59"
     dir="ltr"
   >
     <div
@@ -171,45 +222,96 @@ exports[`Donut chart interactions Should reflect theme change 1`] = `
               <g>
                 <path
                   aria-label="2020/04/30, 20000."
-                  class="fui-donut-arc__root"
-                  d="M0.55,-54.997A55,55,0,0,1,51.396,-19.582L0,0Z"
+                  d="M0.497,-49.747A5,5,0,0,1,6.047,-54.667A55,55,0,0,1,49.18,-24.624A5,5,0,0,1,46.489,-17.713L0,0Z"
                   data-is-focusable="true"
-                  id="_Pie_33first20000"
-                  opacity="1"
+                  id="_Pie_60first20000"
                   role="img"
-                  style="fill: #E5E5E5; cursor: default;"
+                  style="fill: transparent; cursor: default;"
                 />
+                <clippath
+                  id="Arc_clip61#E5E5E5_"
+                >
+                  <path
+                    d="M0.497,-49.747A5,5,0,0,1,6.047,-54.667A55,55,0,0,1,49.18,-24.624A5,5,0,0,1,46.489,-17.713L0,0Z"
+                  />
+                </clippath>
+                <foreignobject
+                  clip-path="url(#Arc_clip61#E5E5E5_)"
+                  height="100%"
+                  width="100%"
+                  x="-50%"
+                  y="-50%"
+                >
+                  <div
+                    class="fui-donut-arc__root"
+                    style="width: 100%; height: 100%; opacity: 1;"
+                  />
+                </foreignobject>
               </g>
               <g>
                 <path
                   aria-label="2020/04/20, 39000."
-                  class="fui-donut-arc__root"
-                  d="M51.777,-18.551A55,55,0,0,1,-22.37,50.245L0,0Z"
+                  d="M46.834,-16.78A5,5,0,0,1,53.373,-13.28A55,55,0,0,1,-17.233,52.23A5,5,0,0,1,-20.234,45.449L0,0Z"
                   data-is-focusable="true"
-                  id="_Pie_33second39000"
-                  opacity="1"
+                  id="_Pie_60second39000"
                   role="img"
-                  style="fill: #0078D4; cursor: default;"
+                  style="fill: transparent; cursor: default;"
                 />
+                <clippath
+                  id="Arc_clip62#0078D4_"
+                >
+                  <path
+                    d="M46.834,-16.78A5,5,0,0,1,53.373,-13.28A55,55,0,0,1,-17.233,52.23A5,5,0,0,1,-20.234,45.449L0,0Z"
+                  />
+                </clippath>
+                <foreignobject
+                  clip-path="url(#Arc_clip62#0078D4_)"
+                  height="100%"
+                  width="100%"
+                  x="-50%"
+                  y="-50%"
+                >
+                  <div
+                    class="fui-donut-arc__root"
+                    style="width: 100%; height: 100%; opacity: 1;"
+                  />
+                </foreignobject>
               </g>
               <g>
                 <path
                   aria-label="2020/04/25, 45000."
-                  class="fui-donut-arc__root"
-                  d="M-23.37,49.788A55,55,0,0,1,-0.55,-54.997L0,0Z"
+                  d="M-21.139,45.035A5,5,0,0,1,-28.232,47.201A55,55,0,0,1,-6.047,-54.667A5,5,0,0,1,-0.497,-49.747L0,0Z"
                   data-is-focusable="true"
-                  id="_Pie_33third45000"
-                  opacity="1"
+                  id="_Pie_60third45000"
                   role="img"
-                  style="fill: #DADADA; cursor: default;"
+                  style="fill: transparent; cursor: default;"
                 />
+                <clippath
+                  id="Arc_clip63#DADADA_"
+                >
+                  <path
+                    d="M-21.139,45.035A5,5,0,0,1,-28.232,47.201A55,55,0,0,1,-6.047,-54.667A5,5,0,0,1,-0.497,-49.747L0,0Z"
+                  />
+                </clippath>
+                <foreignobject
+                  clip-path="url(#Arc_clip63#DADADA_)"
+                  height="100%"
+                  width="100%"
+                  x="-50%"
+                  y="-50%"
+                >
+                  <div
+                    class="fui-donut-arc__root"
+                    style="width: 100%; height: 100%; opacity: 1;"
+                  />
+                </foreignobject>
               </g>
             </g>
           </svg>
         </div>
         <div
           class="fui-cart__calloutContainer"
-          id="callout34"
+          id="callout64"
         />
         <div
           class="fui-donut__legendContainer"
diff --git a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
index fe0096409a891..dd31f2d907108 100644
--- a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
@@ -232,9 +232,9 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
       const gradientId = _gradientId + `_${dataPointIndex}_${index}`;
 
       return (
-        <>
+        <React.Fragment key={index}>
           <defs>
-            <linearGradient id={gradientId}>
+            <linearGradient id={gradientId} className='HBC_gradient'>
               <stop offset="0" stopColor={point.gradient?.[0]} />
               <stop offset="100%" stopColor={point.gradient?.[1]} />
             </linearGradient>
@@ -261,7 +261,7 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
             className={classes.barWrapper}
             tabIndex={point.legend !== '' ? 0 : undefined}
           />
-        </>
+        </React.Fragment>
       );
     });
     return bars;
diff --git a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx
index 23a55d2c16675..5f27140df1191 100644
--- a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx
@@ -5,6 +5,7 @@ import { HorizontalBarChart } from './HorizontalBarChart';
 import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test';
 import { HorizontalBarChartVariant, ChartProps } from './index';
 import { axe, toHaveNoViolations } from 'jest-axe';
+import { DataVizGradientPalette, getGradientFromToken } from '../../utilities/gradients';
 
 expect.extend(toHaveNoViolations);
 
@@ -88,14 +89,18 @@ describe('Horizontal bar chart - Subcomponent bar', () => {
     { data: chartPoints },
     container => {
       // colors mentioned in the data points itself
+
+      // find the gradients and check their stop color
+      const gradients = getByClass(container, /HBC_gradient/i);
+
+      const disabledColor = getGradientFromToken(DataVizGradientPalette.disabled)[0];
       // Assert
-      const bars = getByClass(container, /barWrapper/);
-      expect(bars[0].getAttribute('fill')).toEqual('#004b50');
-      expect(bars[1].getAttribute('fill')).toEqual('var(--colorBackgroundOverlay)');
-      expect(bars[2].getAttribute('fill')).toEqual('#5c2d91');
-      expect(bars[3].getAttribute('fill')).toEqual('var(--colorBackgroundOverlay)');
-      expect(bars[4].getAttribute('fill')).toEqual('#a4262c');
-      expect(bars[5].getAttribute('fill')).toEqual('var(--colorBackgroundOverlay)');
+      expect(gradients[0].querySelector('stop')?.getAttribute('stop-color')).toEqual('#004b50');
+      expect(gradients[1].querySelector('stop')?.getAttribute('stop-color')).toEqual(disabledColor);
+      expect(gradients[2].querySelector('stop')?.getAttribute('stop-color')).toEqual('#5c2d91');
+      expect(gradients[3].querySelector('stop')?.getAttribute('stop-color')).toEqual(disabledColor);
+      expect(gradients[4].querySelector('stop')?.getAttribute('stop-color')).toEqual('#a4262c');
+      expect(gradients[5].querySelector('stop')?.getAttribute('stop-color')).toEqual(disabledColor);
     },
   );
 
diff --git a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index c45ef0b3478d5..5d1f2d9b65744 100644
--- a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -52,11 +52,25 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
           key="_HorizontalLine_lllllm_0"
           onClick={[Function]}
         >
+          <defs>
+            <linearGradient
+              id="HBC_Gradient42_0_0"
+            >
+              <stop
+                offset="0"
+                stopColor="#004b50"
+              />
+              <stop
+                offset="100%"
+                stopColor=""
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="2020/04/30, 94%."
             className="fui-hbc__barWrapper"
             data-is-focusable={true}
-            fill="#004b50"
+            fill="url(#HBC_Gradient42_0_0)"
             height={12}
             key="0"
             onBlur={[Function]}
@@ -64,21 +78,37 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             onMouseLeave={[Function]}
             onMouseOver={[Function]}
             role="img"
+            rx={4}
             tabIndex={0}
             width="10.286666666666665%"
             x="0%"
             y={0}
           />
+          <defs>
+            <linearGradient
+              id="HBC_Gradient42_0_1"
+            >
+              <stop
+                offset="0"
+                stopColor="#E6E6E6"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E6E6E6"
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="13457/15000."
             className="fui-hbc__barWrapper"
             data-is-focusable={false}
-            fill="var(--colorBackgroundOverlay)"
+            fill="url(#HBC_Gradient42_0_1)"
             height={12}
             key="1"
             onBlur={[Function]}
             onMouseLeave={[Function]}
             role="img"
+            rx={4}
             width="89.71333333333334%"
             x="10.286666666666665%"
             y={0}
@@ -134,11 +164,25 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
           key="_HorizontalLine_lllllm_1"
           onClick={[Function]}
         >
+          <defs>
+            <linearGradient
+              id="HBC_Gradient42_1_0"
+            >
+              <stop
+                offset="0"
+                stopColor="#5c2d91"
+              />
+              <stop
+                offset="100%"
+                stopColor=""
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="2020/04/30, 19%."
             className="fui-hbc__barWrapper"
             data-is-focusable={true}
-            fill="#5c2d91"
+            fill="url(#HBC_Gradient42_1_0)"
             height={12}
             key="0"
             onBlur={[Function]}
@@ -146,21 +190,37 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             onMouseLeave={[Function]}
             onMouseOver={[Function]}
             role="img"
+            rx={4}
             tabIndex={0}
             width="5.333333333333334%"
             x="0%"
             y={0}
           />
+          <defs>
+            <linearGradient
+              id="HBC_Gradient42_1_1"
+            >
+              <stop
+                offset="0"
+                stopColor="#E6E6E6"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E6E6E6"
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="14200/15000."
             className="fui-hbc__barWrapper"
             data-is-focusable={false}
-            fill="var(--colorBackgroundOverlay)"
+            fill="url(#HBC_Gradient42_1_1)"
             height={12}
             key="1"
             onBlur={[Function]}
             onMouseLeave={[Function]}
             role="img"
+            rx={4}
             width="94.66666666666667%"
             x="5.333333333333334%"
             y={0}
@@ -171,7 +231,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
   </div>
   <div
     className="fui-cart__calloutContainer"
-    id="callout36"
+    id="callout45"
   />
 </div>
 `;
@@ -228,11 +288,25 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
           key="_HorizontalLine_lllllm_0"
           onClick={[Function]}
         >
+          <defs>
+            <linearGradient
+              id="HBC_Gradient47_0_0"
+            >
+              <stop
+                offset="0"
+                stopColor="#004b50"
+              />
+              <stop
+                offset="100%"
+                stopColor=""
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="2020/04/30, 94%."
             className="fui-hbc__barWrapper"
             data-is-focusable={true}
-            fill="#004b50"
+            fill="url(#HBC_Gradient47_0_0)"
             height={12}
             key="0"
             onBlur={[Function]}
@@ -240,21 +314,37 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             onMouseLeave={[Function]}
             onMouseOver={[Function]}
             role="img"
+            rx={4}
             tabIndex={0}
             width="10.286666666666665%"
             x="0%"
             y={0}
           />
+          <defs>
+            <linearGradient
+              id="HBC_Gradient47_0_1"
+            >
+              <stop
+                offset="0"
+                stopColor="#E6E6E6"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E6E6E6"
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="13457/15000."
             className="fui-hbc__barWrapper"
             data-is-focusable={false}
-            fill="var(--colorBackgroundOverlay)"
+            fill="url(#HBC_Gradient47_0_1)"
             height={12}
             key="1"
             onBlur={[Function]}
             onMouseLeave={[Function]}
             role="img"
+            rx={4}
             width="89.71333333333334%"
             x="10.286666666666665%"
             y={0}
@@ -310,11 +400,25 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
           key="_HorizontalLine_lllllm_1"
           onClick={[Function]}
         >
+          <defs>
+            <linearGradient
+              id="HBC_Gradient47_1_0"
+            >
+              <stop
+                offset="0"
+                stopColor="#5c2d91"
+              />
+              <stop
+                offset="100%"
+                stopColor=""
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="2020/04/30, 19%."
             className="fui-hbc__barWrapper"
             data-is-focusable={true}
-            fill="#5c2d91"
+            fill="url(#HBC_Gradient47_1_0)"
             height={12}
             key="0"
             onBlur={[Function]}
@@ -322,21 +426,37 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             onMouseLeave={[Function]}
             onMouseOver={[Function]}
             role="img"
+            rx={4}
             tabIndex={0}
             width="5.333333333333334%"
             x="0%"
             y={0}
           />
+          <defs>
+            <linearGradient
+              id="HBC_Gradient47_1_1"
+            >
+              <stop
+                offset="0"
+                stopColor="#E6E6E6"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E6E6E6"
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="14200/15000."
             className="fui-hbc__barWrapper"
             data-is-focusable={false}
-            fill="var(--colorBackgroundOverlay)"
+            fill="url(#HBC_Gradient47_1_1)"
             height={12}
             key="1"
             onBlur={[Function]}
             onMouseLeave={[Function]}
             role="img"
+            rx={4}
             width="94.66666666666667%"
             x="5.333333333333334%"
             y={0}
@@ -347,7 +467,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
   </div>
   <div
     className="fui-cart__calloutContainer"
-    id="callout40"
+    id="callout50"
   />
 </div>
 `;
@@ -392,17 +512,32 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
           id="_HorizontalLine_lllllm_0"
           onClick={[Function]}
         >
+          <defs>
+            <linearGradient
+              id="HBC_Gradient7_0_0"
+            >
+              <stop
+                offset="0"
+                stopColor="#004b50"
+              />
+              <stop
+                offset="100%"
+                stopColor=""
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="2020/04/30, 94%."
             className="fui-hbc__barWrapper"
             data-is-focusable={true}
-            fill="#004b50"
+            fill="url(#HBC_Gradient7_0_0)"
             height={12}
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
             onMouseOver={[Function]}
             role="img"
+            rx={4}
             tabIndex={0}
             width="10.286666666666665%"
             x="0%"
@@ -448,17 +583,32 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
           id="_HorizontalLine_lllllm_1"
           onClick={[Function]}
         >
+          <defs>
+            <linearGradient
+              id="HBC_Gradient7_1_0"
+            >
+              <stop
+                offset="0"
+                stopColor="#5c2d91"
+              />
+              <stop
+                offset="100%"
+                stopColor=""
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="2020/04/30, 19%."
             className="fui-hbc__barWrapper"
             data-is-focusable={true}
-            fill="#5c2d91"
+            fill="url(#HBC_Gradient7_1_0)"
             height={12}
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
             onMouseOver={[Function]}
             role="img"
+            rx={4}
             tabIndex={0}
             width="5.333333333333334%"
             x="0%"
@@ -471,7 +621,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
   </div>
   <div
     className="fui-cart__calloutContainer"
-    id="callout8"
+    id="callout10"
   />
 </div>
 `;
@@ -516,17 +666,32 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
           id="_HorizontalLine_lllllm_0"
           onClick={[Function]}
         >
+          <defs>
+            <linearGradient
+              id="HBC_Gradient2_0_0"
+            >
+              <stop
+                offset="0"
+                stopColor="#004b50"
+              />
+              <stop
+                offset="100%"
+                stopColor=""
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="2020/04/30, 94%."
             className="fui-hbc__barWrapper"
             data-is-focusable={true}
-            fill="#004b50"
+            fill="url(#HBC_Gradient2_0_0)"
             height={12}
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
             onMouseOver={[Function]}
             role="img"
+            rx={4}
             tabIndex={0}
             width="10.286666666666665%"
             x="0%"
@@ -581,17 +746,32 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
           id="_HorizontalLine_lllllm_1"
           onClick={[Function]}
         >
+          <defs>
+            <linearGradient
+              id="HBC_Gradient2_1_0"
+            >
+              <stop
+                offset="0"
+                stopColor="#5c2d91"
+              />
+              <stop
+                offset="100%"
+                stopColor=""
+              />
+            </linearGradient>
+          </defs>
           <rect
             aria-label="2020/04/30, 19%."
             className="fui-hbc__barWrapper"
             data-is-focusable={true}
-            fill="#5c2d91"
+            fill="url(#HBC_Gradient2_1_0)"
             height={12}
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
             onMouseOver={[Function]}
             role="img"
+            rx={4}
             tabIndex={0}
             width="5.333333333333334%"
             x="0%"
@@ -613,7 +793,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
   </div>
   <div
     className="fui-cart__calloutContainer"
-    id="callout4"
+    id="callout5"
   />
 </div>
 `;
diff --git a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap
index f9d907c78929e..e42e7e7af89b9 100644
--- a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap
+++ b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap
@@ -42,25 +42,55 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           <g
             id="_HorizontalLine_lllllm_0"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient80_0_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#004b50"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 10%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#004b50"
+              fill="url(#HBC_Gradient80_0_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="10.286666666666665%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient80_0_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="13457/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient80_0_1)"
               height="12"
               role="img"
+              rx="4"
               width="89.71333333333334%"
               x="10.286666666666665%"
               y="0"
@@ -106,25 +136,55 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           <g
             id="_HorizontalLine_lllllm_1"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient80_1_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#5c2d91"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 5%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#5c2d91"
+              fill="url(#HBC_Gradient80_1_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="5.333333333333334%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient80_1_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="14200/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient80_1_1)"
               height="12"
               role="img"
+              rx="4"
               width="94.66666666666667%"
               x="5.333333333333334%"
               y="0"
@@ -170,25 +230,55 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           <g
             id="_HorizontalLine_lllllm_2"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient80_2_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#a4262c"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 59%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#a4262c"
+              fill="url(#HBC_Gradient80_2_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="59.25333333333334%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient80_2_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="6112/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient80_2_1)"
               height="12"
               role="img"
+              rx="4"
               width="40.74666666666666%"
               x="59.25333333333334%"
               y="0"
@@ -199,7 +289,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
     </div>
     <div
       class="fui-cart__calloutContainer"
-      id="callout70"
+      id="callout84"
     />
   </div>
 </div>
@@ -247,25 +337,55 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           <g
             id="_HorizontalLine_lllllm_0"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient86_0_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#004b50"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 10%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#004b50"
+              fill="url(#HBC_Gradient86_0_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="10.286666666666665%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient86_0_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="13457/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient86_0_1)"
               height="12"
               role="img"
+              rx="4"
               width="89.71333333333334%"
               x="10.286666666666665%"
               y="0"
@@ -311,25 +431,55 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           <g
             id="_HorizontalLine_lllllm_1"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient86_1_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#5c2d91"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 5%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#5c2d91"
+              fill="url(#HBC_Gradient86_1_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="5.333333333333334%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient86_1_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="14200/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient86_1_1)"
               height="12"
               role="img"
+              rx="4"
               width="94.66666666666667%"
               x="5.333333333333334%"
               y="0"
@@ -375,25 +525,55 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           <g
             id="_HorizontalLine_lllllm_2"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient86_2_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#a4262c"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 59%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#a4262c"
+              fill="url(#HBC_Gradient86_2_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="59.25333333333334%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient86_2_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="6112/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient86_2_1)"
               height="12"
               role="img"
+              rx="4"
               width="40.74666666666666%"
               x="59.25333333333334%"
               y="0"
@@ -404,7 +584,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
     </div>
     <div
       class="fui-cart__calloutContainer"
-      id="callout75"
+      id="callout90"
     />
   </div>
 </div>
@@ -413,7 +593,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
 exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
 <div>
   <div
-    class="fui-FluentProvider fui-FluentProvider76"
+    class="fui-FluentProvider fui-FluentProvider91"
     dir="ltr"
   >
     <div
@@ -456,25 +636,55 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
             <g
               id="_HorizontalLine_lllllm_0"
             >
+              <defs>
+                <lineargradient
+                  id="HBC_Gradient93_0_0"
+                >
+                  <stop
+                    offset="0"
+                    stop-color="#004b50"
+                  />
+                  <stop
+                    offset="100%"
+                    stop-color=""
+                  />
+                </lineargradient>
+              </defs>
               <rect
                 aria-label="2020/04/30, 10%."
                 class="fui-hbc__barWrapper"
                 data-is-focusable="true"
-                fill="#004b50"
+                fill="url(#HBC_Gradient93_0_0)"
                 height="12"
                 role="img"
+                rx="4"
                 tabindex="0"
                 width="10.286666666666665%"
                 x="0%"
                 y="0"
               />
+              <defs>
+                <lineargradient
+                  id="HBC_Gradient93_0_1"
+                >
+                  <stop
+                    offset="0"
+                    stop-color="#E6E6E6"
+                  />
+                  <stop
+                    offset="100%"
+                    stop-color="#E6E6E6"
+                  />
+                </lineargradient>
+              </defs>
               <rect
                 aria-label="13457/15000."
                 class="fui-hbc__barWrapper"
                 data-is-focusable="false"
-                fill="var(--colorBackgroundOverlay)"
+                fill="url(#HBC_Gradient93_0_1)"
                 height="12"
                 role="img"
+                rx="4"
                 width="89.71333333333334%"
                 x="10.286666666666665%"
                 y="0"
@@ -520,25 +730,55 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
             <g
               id="_HorizontalLine_lllllm_1"
             >
+              <defs>
+                <lineargradient
+                  id="HBC_Gradient93_1_0"
+                >
+                  <stop
+                    offset="0"
+                    stop-color="#5c2d91"
+                  />
+                  <stop
+                    offset="100%"
+                    stop-color=""
+                  />
+                </lineargradient>
+              </defs>
               <rect
                 aria-label="2020/04/30, 5%."
                 class="fui-hbc__barWrapper"
                 data-is-focusable="true"
-                fill="#5c2d91"
+                fill="url(#HBC_Gradient93_1_0)"
                 height="12"
                 role="img"
+                rx="4"
                 tabindex="0"
                 width="5.333333333333334%"
                 x="0%"
                 y="0"
               />
+              <defs>
+                <lineargradient
+                  id="HBC_Gradient93_1_1"
+                >
+                  <stop
+                    offset="0"
+                    stop-color="#E6E6E6"
+                  />
+                  <stop
+                    offset="100%"
+                    stop-color="#E6E6E6"
+                  />
+                </lineargradient>
+              </defs>
               <rect
                 aria-label="14200/15000."
                 class="fui-hbc__barWrapper"
                 data-is-focusable="false"
-                fill="var(--colorBackgroundOverlay)"
+                fill="url(#HBC_Gradient93_1_1)"
                 height="12"
                 role="img"
+                rx="4"
                 width="94.66666666666667%"
                 x="5.333333333333334%"
                 y="0"
@@ -584,25 +824,55 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
             <g
               id="_HorizontalLine_lllllm_2"
             >
+              <defs>
+                <lineargradient
+                  id="HBC_Gradient93_2_0"
+                >
+                  <stop
+                    offset="0"
+                    stop-color="#a4262c"
+                  />
+                  <stop
+                    offset="100%"
+                    stop-color=""
+                  />
+                </lineargradient>
+              </defs>
               <rect
                 aria-label="2020/04/30, 59%."
                 class="fui-hbc__barWrapper"
                 data-is-focusable="true"
-                fill="#a4262c"
+                fill="url(#HBC_Gradient93_2_0)"
                 height="12"
                 role="img"
+                rx="4"
                 tabindex="0"
                 width="59.25333333333334%"
                 x="0%"
                 y="0"
               />
+              <defs>
+                <lineargradient
+                  id="HBC_Gradient93_2_1"
+                >
+                  <stop
+                    offset="0"
+                    stop-color="#E6E6E6"
+                  />
+                  <stop
+                    offset="100%"
+                    stop-color="#E6E6E6"
+                  />
+                </lineargradient>
+              </defs>
               <rect
                 aria-label="6112/15000."
                 class="fui-hbc__barWrapper"
                 data-is-focusable="false"
-                fill="var(--colorBackgroundOverlay)"
+                fill="url(#HBC_Gradient93_2_1)"
                 height="12"
                 role="img"
+                rx="4"
                 width="40.74666666666666%"
                 x="59.25333333333334%"
                 y="0"
@@ -613,7 +883,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
       </div>
       <div
         class="fui-cart__calloutContainer"
-        id="callout81"
+        id="callout97"
       />
     </div>
   </div>
@@ -624,7 +894,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
 <div>
   <div
     aria-label="Graph has no data to display"
-    id="_HBC_empty82"
+    id="_HBC_empty98"
     role="alert"
     style="opacity: 0;"
   />
@@ -674,25 +944,55 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
           <g
             id="_HorizontalLine_lllllm_0"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient99_0_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#004b50"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 10%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#004b50"
+              fill="url(#HBC_Gradient99_0_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="10.286666666666665%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient99_0_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="13457/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient99_0_1)"
               height="12"
               role="img"
+              rx="4"
               width="89.71333333333334%"
               x="10.286666666666665%"
               y="0"
@@ -738,25 +1038,55 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
           <g
             id="_HorizontalLine_lllllm_1"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient99_1_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#5c2d91"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 5%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#5c2d91"
+              fill="url(#HBC_Gradient99_1_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="5.333333333333334%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient99_1_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="14200/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient99_1_1)"
               height="12"
               role="img"
+              rx="4"
               width="94.66666666666667%"
               x="5.333333333333334%"
               y="0"
@@ -802,25 +1132,55 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
           <g
             id="_HorizontalLine_lllllm_2"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient99_2_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#a4262c"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 59%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#a4262c"
+              fill="url(#HBC_Gradient99_2_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="59.25333333333334%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient99_2_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="6112/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient99_2_1)"
               height="12"
               role="img"
+              rx="4"
               width="40.74666666666666%"
               x="59.25333333333334%"
               y="0"
@@ -831,7 +1191,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
     </div>
     <div
       class="fui-cart__calloutContainer"
-      id="callout86"
+      id="callout103"
     />
   </div>
 </div>
@@ -879,25 +1239,55 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
           <g
             id="_HorizontalLine_lllllm_0"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient2_0_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#004b50"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 10%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#004b50"
+              fill="url(#HBC_Gradient2_0_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="10.286666666666665%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient2_0_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="13457/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient2_0_1)"
               height="12"
               role="img"
+              rx="4"
               width="89.71333333333334%"
               x="10.286666666666665%"
               y="0"
@@ -943,25 +1333,55 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
           <g
             id="_HorizontalLine_lllllm_1"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient2_1_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#5c2d91"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 5%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#5c2d91"
+              fill="url(#HBC_Gradient2_1_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="5.333333333333334%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient2_1_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="14200/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient2_1_1)"
               height="12"
               role="img"
+              rx="4"
               width="94.66666666666667%"
               x="5.333333333333334%"
               y="0"
@@ -1007,25 +1427,55 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
           <g
             id="_HorizontalLine_lllllm_2"
           >
+            <defs>
+              <lineargradient
+                id="HBC_Gradient2_2_0"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#a4262c"
+                />
+                <stop
+                  offset="100%"
+                  stop-color=""
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="2020/04/30, 59%."
               class="fui-hbc__barWrapper"
               data-is-focusable="true"
-              fill="#a4262c"
+              fill="url(#HBC_Gradient2_2_0)"
               height="12"
               role="img"
+              rx="4"
               tabindex="0"
               width="59.25333333333334%"
               x="0%"
               y="0"
             />
+            <defs>
+              <lineargradient
+                id="HBC_Gradient2_2_1"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#E6E6E6"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#E6E6E6"
+                />
+              </lineargradient>
+            </defs>
             <rect
               aria-label="6112/15000."
               class="fui-hbc__barWrapper"
               data-is-focusable="false"
-              fill="var(--colorBackgroundOverlay)"
+              fill="url(#HBC_Gradient2_2_1)"
               height="12"
               role="img"
+              rx="4"
               width="40.74666666666666%"
               x="59.25333333333334%"
               y="0"
@@ -1036,7 +1486,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
     </div>
     <div
       class="fui-cart__calloutContainer"
-      id="callout5"
+      id="callout6"
     />
   </div>
 </div>

From d9aa34d9a237275af8df0b698c5c35e7971c565d Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Thu, 21 Nov 2024 07:23:18 +0000
Subject: [PATCH 11/19] refactor: update all DonutChart stories to use gradient
 pallete

---
 .../DonutChartCustomAccessibility.stories.tsx |  8 +--
 .../DonutChartCustomCallout.stories.tsx       |  6 ++-
 .../DonutChart/DonutChartDefault.stories.tsx  | 19 +++++--
 .../DonutChart/DonutChartDynamic.stories.tsx  | 50 +++++++++++--------
 .../DonutChart/DonutChartStyled.stories.tsx   | 21 ++++++--
 5 files changed, 69 insertions(+), 35 deletions(-)

diff --git a/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartCustomAccessibility.stories.tsx b/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartCustomAccessibility.stories.tsx
index 9e6b028838bdc..26f937b3a9fb1 100644
--- a/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartCustomAccessibility.stories.tsx
+++ b/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartCustomAccessibility.stories.tsx
@@ -3,8 +3,8 @@ import {
   DonutChart,
   ChartProps,
   ChartDataPoint,
-  DataVizPalette,
-  getColorFromToken,
+  getGradientFromToken,
+  DataVizGradientPalette,
 } from '@fluentui/react-charts-preview';
 
 export const DonutChartCustomAccessibility = () => {
@@ -12,14 +12,14 @@ export const DonutChartCustomAccessibility = () => {
     {
       legend: 'first',
       data: 20000,
-      color: getColorFromToken(DataVizPalette.color16),
+      gradient: getGradientFromToken(DataVizGradientPalette.gradient6Ext),
       xAxisCalloutData: '2020/04/30',
       callOutAccessibilityData: { ariaLabel: 'Pia chart 1 of 2 2020/04/30' },
     },
     {
       legend: 'second',
       data: 39000,
-      color: getColorFromToken(DataVizPalette.color3),
+      gradient: getGradientFromToken(DataVizGradientPalette.gradient3),
       xAxisCalloutData: '2020/04/20',
       callOutAccessibilityData: { ariaLabel: 'Pia chart 2 of 2 2020/04/20' },
     },
diff --git a/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartCustomCallout.stories.tsx b/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartCustomCallout.stories.tsx
index 0ffadb16ff36c..1ec5150f005c0 100644
--- a/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartCustomCallout.stories.tsx
+++ b/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartCustomCallout.stories.tsx
@@ -6,6 +6,8 @@ import {
   DataVizPalette,
   getColorFromToken,
   ChartPopoverProps,
+  getGradientFromToken,
+  DataVizGradientPalette,
 } from '@fluentui/react-charts-preview';
 import { Switch, tokens } from '@fluentui/react-components';
 
@@ -16,14 +18,14 @@ export const DonutChartCustomCallout = () => {
     {
       legend: 'first',
       data: 20000,
-      color: getColorFromToken(DataVizPalette.color9),
+      gradient: getGradientFromToken(DataVizGradientPalette.gradient9),
       xAxisCalloutData: '2020/04/30',
       callOutAccessibilityData: { ariaLabel: 'Custom XVal Custom Legend 20000h' },
     },
     {
       legend: 'second',
       data: 39000,
-      color: getColorFromToken(DataVizPalette.color10),
+      gradient: getGradientFromToken(DataVizGradientPalette.gradient10),
       xAxisCalloutData: '2020/04/20',
       callOutAccessibilityData: { ariaLabel: 'Custom XVal Custom Legend 39000h' },
     },
diff --git a/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartDefault.stories.tsx b/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartDefault.stories.tsx
index f184e5f9619cf..a76bf3069c488 100644
--- a/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartDefault.stories.tsx
+++ b/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartDefault.stories.tsx
@@ -1,13 +1,24 @@
 import * as React from 'react';
-import { DonutChart, ChartProps, getColorFromToken, DataVizPalette } from '@fluentui/react-charts-preview';
+import {
+  DonutChart,
+  ChartProps,
+  ChartDataPoint,
+  DataVizGradientPalette,
+  getGradientFromToken,
+} from '@fluentui/react-charts-preview';
 
 export const DonutChartBasic = () => {
-  const points = [
-    { legend: 'first', data: 20000, color: getColorFromToken(DataVizPalette.color1), xAxisCalloutData: '2020/04/30' },
+  const points: ChartDataPoint[] = [
+    {
+      legend: 'first',
+      data: 20000,
+      gradient: getGradientFromToken(DataVizGradientPalette.gradient1),
+      xAxisCalloutData: '2020/04/30',
+    },
     {
       legend: 'second',
       data: 35000,
-      color: getColorFromToken(DataVizPalette.color2),
+      gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
       xAxisCalloutData: '2020/04/20',
     },
   ];
diff --git a/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartDynamic.stories.tsx b/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartDynamic.stories.tsx
index 4dbecd04d5585..15cd00517cb9f 100644
--- a/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartDynamic.stories.tsx
+++ b/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartDynamic.stories.tsx
@@ -3,8 +3,8 @@ import {
   DonutChart,
   ChartProps,
   ChartDataPoint,
-  DataVizPalette,
-  getColorFromToken,
+  DataVizGradientPalette,
+  getGradientFromToken,
 } from '@fluentui/react-charts-preview';
 
 import { Button, Checkbox, CheckboxOnChangeData } from '@fluentui/react-components';
@@ -22,18 +22,26 @@ const screenReaderOnlyStyle: React.CSSProperties = {
 };
 
 export const DonutChartDynamic = () => {
-  const _colors = [
-    [DataVizPalette.color3, DataVizPalette.color4, DataVizPalette.color5, DataVizPalette.color6, DataVizPalette.color7],
-    [DataVizPalette.color8, DataVizPalette.color9, DataVizPalette.color10, DataVizPalette.color11],
-    [DataVizPalette.color12, DataVizPalette.color13, DataVizPalette.color14, DataVizPalette.color15],
-    [DataVizPalette.color16, DataVizPalette.color17, DataVizPalette.color18],
+  const _gradientColors = [
+    [
+      getGradientFromToken(DataVizGradientPalette.gradient1),
+      getGradientFromToken(DataVizGradientPalette.gradient3),
+      getGradientFromToken(DataVizGradientPalette.gradient9),
+    ],
+    [getGradientFromToken(DataVizGradientPalette.gradient2), getGradientFromToken(DataVizGradientPalette.gradient4)],
+    [
+      getGradientFromToken(DataVizGradientPalette.gradient5),
+      getGradientFromToken(DataVizGradientPalette.gradient6),
+      getGradientFromToken(DataVizGradientPalette.gradient10),
+    ],
+    [getGradientFromToken(DataVizGradientPalette.gradient7), getGradientFromToken(DataVizGradientPalette.gradient8)],
   ];
 
   const [dynamicData, setDynamicData] = React.useState<ChartDataPoint[]>([
-    { legend: 'first', data: 40, color: getColorFromToken(DataVizPalette.color1) },
-    { legend: 'second', data: 20, color: getColorFromToken(DataVizPalette.color2) },
-    { legend: 'third', data: 30, color: getColorFromToken(DataVizPalette.color3) },
-    { legend: 'fourth', data: 10, color: getColorFromToken(DataVizPalette.color4) },
+    { legend: 'first', data: 40, gradient: getGradientFromToken(DataVizGradientPalette.gradient1) },
+    { legend: 'second', data: 20, gradient: getGradientFromToken(DataVizGradientPalette.gradient2) },
+    { legend: 'third', data: 30, gradient: getGradientFromToken(DataVizGradientPalette.gradient3) },
+    { legend: 'fourth', data: 10, gradient: getGradientFromToken(DataVizGradientPalette.gradient4) },
   ]);
   const [hideLabels, setHideLabels] = React.useState<boolean>(false);
   const [showLabelsInPercent, setShowLabelsInPercent] = React.useState<boolean>(false);
@@ -43,10 +51,10 @@ export const DonutChartDynamic = () => {
 
   const _changeData = (): void => {
     setDynamicData([
-      { legend: 'first', data: _randomY(), color: getColorFromToken(DataVizPalette.color1) },
-      { legend: 'second', data: _randomY(), color: getColorFromToken(DataVizPalette.color2) },
-      { legend: 'third', data: _randomY(), color: getColorFromToken(DataVizPalette.color3) },
-      { legend: 'fourth', data: _randomY(), color: getColorFromToken(DataVizPalette.color4) },
+      { legend: 'first', data: _randomY(), gradient: getGradientFromToken(DataVizGradientPalette.gradient1) },
+      { legend: 'second', data: _randomY(), gradient: getGradientFromToken(DataVizGradientPalette.gradient2) },
+      { legend: 'third', data: _randomY(), gradient: getGradientFromToken(DataVizGradientPalette.gradient3) },
+      { legend: 'fourth', data: _randomY(), gradient: getGradientFromToken(DataVizGradientPalette.gradient4) },
     ]);
     setStatusKey(statusKey + 1);
     setStatusMessage('Donut chart data changed');
@@ -54,10 +62,10 @@ export const DonutChartDynamic = () => {
 
   const _changeColors = (): void => {
     setDynamicData([
-      { legend: 'first', data: 40, color: _randomColor(0) },
-      { legend: 'second', data: 20, color: _randomColor(1) },
-      { legend: 'third', data: 30, color: _randomColor(2) },
-      { legend: 'fourth', data: 10, color: _randomColor(3) },
+      { legend: 'first', data: 40, gradient: _randomGradient(0) },
+      { legend: 'second', data: 20, gradient: _randomGradient(1) },
+      { legend: 'third', data: 30, gradient: _randomGradient(2) },
+      { legend: 'fourth', data: 10, gradient: _randomGradient(3) },
     ]);
     setStatusKey(statusKey + 1);
     setStatusMessage('Donut chart colors changed');
@@ -67,8 +75,8 @@ export const DonutChartDynamic = () => {
     return Math.floor(Math.random() * max + 5);
   };
 
-  const _randomColor = (index: number): string => {
-    return getColorFromToken(_colors[index][Math.floor(Math.random() * _colors[index].length)]);
+  const _randomGradient = (index: number): [string, string] => {
+    return _gradientColors[index][Math.floor(Math.random() * _gradientColors[index].length)];
   };
 
   const _onHideLabelsCheckChange = (ev: React.ChangeEvent<HTMLInputElement>, checked: CheckboxOnChangeData) => {
diff --git a/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartStyled.stories.tsx b/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartStyled.stories.tsx
index 92222e931a85c..edab8b165850a 100644
--- a/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartStyled.stories.tsx
+++ b/packages/charts/react-charts-preview/stories/src/DonutChart/DonutChartStyled.stories.tsx
@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { DonutChart, ChartProps, getColorFromToken, DataVizPalette } from '@fluentui/react-charts-preview';
+import {
+  DonutChart,
+  ChartProps,
+  getColorFromToken,
+  DataVizPalette,
+  ChartDataPoint,
+  DataVizGradientPalette,
+  getGradientFromToken,
+} from '@fluentui/react-charts-preview';
 import { makeStyles, mergeClasses } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
@@ -14,12 +22,17 @@ const useStyles = makeStyles({
 export const DonutChartStyled = () => {
   const classes = useStyles();
 
-  const points = [
-    { legend: 'first', data: 20000, color: getColorFromToken(DataVizPalette.color1), xAxisCalloutData: '2020/04/30' },
+  const points: ChartDataPoint[] = [
+    {
+      legend: 'first',
+      data: 20000,
+      gradient: getGradientFromToken(DataVizGradientPalette.gradient1),
+      xAxisCalloutData: '2020/04/30',
+    },
     {
       legend: 'second',
       data: 39000,
-      color: getColorFromToken(DataVizPalette.color2),
+      gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
       xAxisCalloutData: '2020/04/20',
     },
   ];

From 40f628c03fcf217464b2390630fce7501d2a26c1 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Thu, 21 Nov 2024 18:31:00 +0000
Subject: [PATCH 12/19] refactor: update HorizontalBarChart stories to use
 gradient palette

---
 .../HorizontalBarChartBenchmark.stories.tsx   | 13 +++++++----
 ...talBarChartCustomAccessibility.stories.tsx | 23 +++++++++++--------
 ...orizontalBarChartCustomCallout.stories.tsx | 21 +++++++++--------
 .../HorizontalBarChartDefault.stories.tsx     | 18 +++++++--------
 .../HorizontalBarChartVariant.stories.tsx     | 21 +++++++++--------
 5 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartBenchmark.stories.tsx b/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartBenchmark.stories.tsx
index 31ed7b0cb2726..bead67fad526f 100644
--- a/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartBenchmark.stories.tsx
+++ b/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartBenchmark.stories.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { HorizontalBarChart, ChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charts-preview';
+import {
+  HorizontalBarChart,
+  ChartProps,
+  DataVizGradientPalette,
+  getGradientFromToken,
+} from '@fluentui/react-charts-preview';
 
 export const HorizontalBarBenchmark = () => {
   const hideRatio: boolean[] = [true, false];
@@ -11,7 +16,7 @@ export const HorizontalBarBenchmark = () => {
           legend: 'one',
           data: 50,
           horizontalBarChartdata: { x: 10, y: 100 },
-          color: getColorFromToken(DataVizPalette.color25),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient8Ext),
         },
       ],
     },
@@ -22,7 +27,7 @@ export const HorizontalBarBenchmark = () => {
           legend: 'two',
           data: 30,
           horizontalBarChartdata: { x: 30, y: 200 },
-          color: getColorFromToken(DataVizPalette.color26),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient9Ext),
         },
       ],
     },
@@ -33,7 +38,7 @@ export const HorizontalBarBenchmark = () => {
           legend: 'three',
           data: 5,
           horizontalBarChartdata: { x: 15, y: 50 },
-          color: getColorFromToken(DataVizPalette.color27),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient10Ext),
         },
       ],
     },
diff --git a/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartCustomAccessibility.stories.tsx b/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartCustomAccessibility.stories.tsx
index 46502c8bbe756..6062e8ecdd5df 100644
--- a/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartCustomAccessibility.stories.tsx
+++ b/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartCustomAccessibility.stories.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { HorizontalBarChart, ChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charts-preview';
+import {
+  HorizontalBarChart,
+  ChartProps,
+  DataVizGradientPalette,
+  getGradientFromToken,
+} from '@fluentui/react-charts-preview';
 
 export const HorizontalBarCustomAccessibility = () => {
   const data: ChartProps[] = [
@@ -11,7 +16,7 @@ export const HorizontalBarCustomAccessibility = () => {
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color9),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient1Ext),
           xAxisCalloutData: '2021/06/10',
           yAxisCalloutData: '10%',
           callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart one 2021/06/10 10%' },
@@ -26,7 +31,7 @@ export const HorizontalBarCustomAccessibility = () => {
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color10),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient2Ext),
           xAxisCalloutData: '2021/06/11',
           yAxisCalloutData: '5%',
           callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart two 2021/06/11 5%' },
@@ -41,7 +46,7 @@ export const HorizontalBarCustomAccessibility = () => {
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color11),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient3Ext),
           xAxisCalloutData: '2021/06/12',
           yAxisCalloutData: '59%',
           callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart three 2021/06/12 59%' },
@@ -56,7 +61,7 @@ export const HorizontalBarCustomAccessibility = () => {
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color12),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient4Ext),
           xAxisCalloutData: '2021/06/13',
           yAxisCalloutData: '105%',
           callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart four 2021/06/13 105%' },
@@ -71,7 +76,7 @@ export const HorizontalBarCustomAccessibility = () => {
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color13),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient5Ext),
           xAxisCalloutData: '2021/06/14',
           yAxisCalloutData: '76%',
           callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart five 2021/06/14 76%' },
@@ -86,7 +91,7 @@ export const HorizontalBarCustomAccessibility = () => {
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color14),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient6Ext),
           xAxisCalloutData: '2021/06/15',
           yAxisCalloutData: '93%',
           callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart six 2021/06/15 93%' },
@@ -101,7 +106,7 @@ export const HorizontalBarCustomAccessibility = () => {
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color15),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient7Ext),
           xAxisCalloutData: '2021/06/16',
           yAxisCalloutData: '65%',
           callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart seven 2021/06/16 65%' },
@@ -116,7 +121,7 @@ export const HorizontalBarCustomAccessibility = () => {
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color16),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient8Ext),
           xAxisCalloutData: '2021/06/17',
           yAxisCalloutData: '28%',
           callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart eight 2021/06/17 28%' },
diff --git a/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartCustomCallout.stories.tsx b/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartCustomCallout.stories.tsx
index 96cd98ca40fbd..0dd41b4404797 100644
--- a/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartCustomCallout.stories.tsx
+++ b/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartCustomCallout.stories.tsx
@@ -6,6 +6,8 @@ import {
   DataVizPalette,
   getColorFromToken,
   ChartPopoverProps,
+  DataVizGradientPalette,
+  getGradientFromToken,
 } from '@fluentui/react-charts-preview';
 // import * as d3 from 'd3-format';
 import { Switch, tokens } from '@fluentui/react-components';
@@ -21,7 +23,7 @@ export const HorizontalBarCustomCallout = () => {
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color28),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient1Ext),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '1.5K',
         },
@@ -33,7 +35,7 @@ export const HorizontalBarCustomCallout = () => {
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color29),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient2Ext),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '800',
         },
@@ -45,7 +47,7 @@ export const HorizontalBarCustomCallout = () => {
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color30),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient3Ext),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '8.8K',
         },
@@ -57,7 +59,7 @@ export const HorizontalBarCustomCallout = () => {
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color31),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient4Ext),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '16K',
         },
@@ -69,7 +71,7 @@ export const HorizontalBarCustomCallout = () => {
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color32),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient5Ext),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '11K',
         },
@@ -81,7 +83,7 @@ export const HorizontalBarCustomCallout = () => {
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color33),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient6Ext),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '14K',
         },
@@ -93,7 +95,7 @@ export const HorizontalBarCustomCallout = () => {
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color34),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient7Ext),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '9.9K',
         },
@@ -105,16 +107,17 @@ export const HorizontalBarCustomCallout = () => {
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color35),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient8Ext),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '4.3K',
         },
       ],
     },
   ];
+
   const customPopoverProps = (props: ChartDataPoint): ChartPopoverProps => {
     const yValue = props ? `${props.yAxisCalloutData! || props.data} h` : '';
-    const color = props ? props.color : getColorFromToken(DataVizPalette.color28);
+    const color = props ? props.gradient?.[0] : getColorFromToken(DataVizPalette.color28);
     return {
       XValue: 'Custom XVal',
       legend: 'Custom Legend',
diff --git a/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartDefault.stories.tsx b/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartDefault.stories.tsx
index be2ff5e3c1e4e..168c90a375257 100644
--- a/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartDefault.stories.tsx
+++ b/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartDefault.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HorizontalBarChart, getColorFromToken, DataVizPalette } from '@fluentui/react-charts-preview';
+import { HorizontalBarChart, DataVizGradientPalette, getGradientFromToken } from '@fluentui/react-charts-preview';
 
 export const HorizontalBarBasic = () => {
   const data = [
@@ -9,7 +9,7 @@ export const HorizontalBarBasic = () => {
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color1),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient1),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '10%',
         },
@@ -21,7 +21,7 @@ export const HorizontalBarBasic = () => {
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color2),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '5%',
         },
@@ -33,7 +33,7 @@ export const HorizontalBarBasic = () => {
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color3),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient3),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '59%',
         },
@@ -45,7 +45,7 @@ export const HorizontalBarBasic = () => {
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color4),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient4),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '106%',
         },
@@ -57,7 +57,7 @@ export const HorizontalBarBasic = () => {
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color5),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient5),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '76%',
         },
@@ -69,7 +69,7 @@ export const HorizontalBarBasic = () => {
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color6),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient6),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '93%',
         },
@@ -81,7 +81,7 @@ export const HorizontalBarBasic = () => {
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color7),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient7),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '66%',
         },
@@ -93,7 +93,7 @@ export const HorizontalBarBasic = () => {
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color8),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient8),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '28%',
         },
diff --git a/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartVariant.stories.tsx b/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartVariant.stories.tsx
index 3ab3537cb8ae8..d995f367792b0 100644
--- a/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartVariant.stories.tsx
+++ b/packages/charts/react-charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartVariant.stories.tsx
@@ -3,8 +3,8 @@ import {
   HorizontalBarChart,
   HorizontalBarChartVariant,
   ChartProps,
-  DataVizPalette,
-  getColorFromToken,
+  DataVizGradientPalette,
+  getGradientFromToken,
 } from '@fluentui/react-charts-preview';
 import { Checkbox, CheckboxOnChangeData } from '@fluentui/react-components';
 
@@ -20,7 +20,7 @@ export const HorizontalBarAbsoluteScale = () => {
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color17),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient1),
         },
       ],
     },
@@ -30,7 +30,7 @@ export const HorizontalBarAbsoluteScale = () => {
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color18),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
         },
       ],
     },
@@ -40,7 +40,7 @@ export const HorizontalBarAbsoluteScale = () => {
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color19),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient3),
         },
       ],
     },
@@ -50,7 +50,7 @@ export const HorizontalBarAbsoluteScale = () => {
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color20),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient4),
         },
       ],
     },
@@ -60,7 +60,7 @@ export const HorizontalBarAbsoluteScale = () => {
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color21),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient5),
         },
       ],
     },
@@ -70,7 +70,7 @@ export const HorizontalBarAbsoluteScale = () => {
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color22),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient6),
         },
       ],
     },
@@ -80,7 +80,7 @@ export const HorizontalBarAbsoluteScale = () => {
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color23),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient7),
         },
       ],
     },
@@ -90,11 +90,12 @@ export const HorizontalBarAbsoluteScale = () => {
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color24),
+          gradient: getGradientFromToken(DataVizGradientPalette.gradient8),
         },
       ],
     },
   ];
+
   return (
     <>
       <div style={{ marginBottom: '20px' }}>

From 18988c5896453f616c309506b42aec033a17cef8 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Thu, 21 Nov 2024 20:12:25 +0000
Subject: [PATCH 13/19] fix HBC test snapshots

---
 .../HorizontalBarChart.test.tsx.snap          | 12 ++++++++
 .../HorizontalBarChartRTL.test.tsx.snap       | 30 +++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index 5d1f2d9b65744..20befc4734c1d 100644
--- a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -54,6 +54,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
         >
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient42_0_0"
             >
               <stop
@@ -86,6 +87,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
           />
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient42_0_1"
             >
               <stop
@@ -166,6 +168,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
         >
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient42_1_0"
             >
               <stop
@@ -198,6 +201,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
           />
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient42_1_1"
             >
               <stop
@@ -290,6 +294,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
         >
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient47_0_0"
             >
               <stop
@@ -322,6 +327,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
           />
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient47_0_1"
             >
               <stop
@@ -402,6 +408,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
         >
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient47_1_0"
             >
               <stop
@@ -434,6 +441,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
           />
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient47_1_1"
             >
               <stop
@@ -514,6 +522,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
         >
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient7_0_0"
             >
               <stop
@@ -585,6 +594,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
         >
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient7_1_0"
             >
               <stop
@@ -668,6 +678,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
         >
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient2_0_0"
             >
               <stop
@@ -748,6 +759,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
         >
           <defs>
             <linearGradient
+              className="HBC_gradient"
               id="HBC_Gradient2_1_0"
             >
               <stop
diff --git a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap
index e42e7e7af89b9..2d5d7bec4c691 100644
--- a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap
+++ b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChartRTL.test.tsx.snap
@@ -44,6 +44,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient80_0_0"
               >
                 <stop
@@ -71,6 +72,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient80_0_1"
               >
                 <stop
@@ -138,6 +140,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient80_1_0"
               >
                 <stop
@@ -165,6 +168,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient80_1_1"
               >
                 <stop
@@ -232,6 +236,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient80_2_0"
               >
                 <stop
@@ -259,6 +264,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient80_2_1"
               >
                 <stop
@@ -339,6 +345,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient86_0_0"
               >
                 <stop
@@ -366,6 +373,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient86_0_1"
               >
                 <stop
@@ -433,6 +441,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient86_1_0"
               >
                 <stop
@@ -460,6 +469,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient86_1_1"
               >
                 <stop
@@ -527,6 +537,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient86_2_0"
               >
                 <stop
@@ -554,6 +565,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient86_2_1"
               >
                 <stop
@@ -638,6 +650,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
             >
               <defs>
                 <lineargradient
+                  class="HBC_gradient"
                   id="HBC_Gradient93_0_0"
                 >
                   <stop
@@ -665,6 +678,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
               />
               <defs>
                 <lineargradient
+                  class="HBC_gradient"
                   id="HBC_Gradient93_0_1"
                 >
                   <stop
@@ -732,6 +746,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
             >
               <defs>
                 <lineargradient
+                  class="HBC_gradient"
                   id="HBC_Gradient93_1_0"
                 >
                   <stop
@@ -759,6 +774,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
               />
               <defs>
                 <lineargradient
+                  class="HBC_gradient"
                   id="HBC_Gradient93_1_1"
                 >
                   <stop
@@ -826,6 +842,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
             >
               <defs>
                 <lineargradient
+                  class="HBC_gradient"
                   id="HBC_Gradient93_2_0"
                 >
                   <stop
@@ -853,6 +870,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
               />
               <defs>
                 <lineargradient
+                  class="HBC_gradient"
                   id="HBC_Gradient93_2_1"
                 >
                   <stop
@@ -946,6 +964,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient99_0_0"
               >
                 <stop
@@ -973,6 +992,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient99_0_1"
               >
                 <stop
@@ -1040,6 +1060,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient99_1_0"
               >
                 <stop
@@ -1067,6 +1088,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient99_1_1"
               >
                 <stop
@@ -1134,6 +1156,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient99_2_0"
               >
                 <stop
@@ -1161,6 +1184,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient99_2_1"
               >
                 <stop
@@ -1241,6 +1265,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient2_0_0"
               >
                 <stop
@@ -1268,6 +1293,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient2_0_1"
               >
                 <stop
@@ -1335,6 +1361,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient2_1_0"
               >
                 <stop
@@ -1362,6 +1389,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient2_1_1"
               >
                 <stop
@@ -1429,6 +1457,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
           >
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient2_2_0"
               >
                 <stop
@@ -1456,6 +1485,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
             />
             <defs>
               <lineargradient
+                class="HBC_gradient"
                 id="HBC_Gradient2_2_1"
               >
                 <stop

From 61e5ad7f5211859f581dc842e73c86fd6add484e Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Thu, 21 Nov 2024 20:24:18 +0000
Subject: [PATCH 14/19] update change files

---
 ...harts-preview-d9ff82b5-6274-429e-8f9d-bd400e647d4b.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-charts-preview-d9ff82b5-6274-429e-8f9d-bd400e647d4b.json

diff --git a/change/@fluentui-react-charts-preview-d9ff82b5-6274-429e-8f9d-bd400e647d4b.json b/change/@fluentui-react-charts-preview-d9ff82b5-6274-429e-8f9d-bd400e647d4b.json
new file mode 100644
index 0000000000000..4ec30c7f49f8e
--- /dev/null
+++ b/change/@fluentui-react-charts-preview-d9ff82b5-6274-429e-8f9d-bd400e647d4b.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Introduce gradients and rounded corners to v9 charts",
+  "packageName": "@fluentui/react-charts-preview",
+  "email": "shawngrant333@gmail.com",
+  "dependentChangeType": "patch"
+}

From fc6d1c468172663368390e34d40549ad294061ba Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Fri, 22 Nov 2024 02:46:10 +0000
Subject: [PATCH 15/19] update change files

---
 ...harts-preview-4a4fc3a5-16b8-4e2c-9fea-5cb5888e977f.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-charts-preview-4a4fc3a5-16b8-4e2c-9fea-5cb5888e977f.json

diff --git a/change/@fluentui-react-charts-preview-4a4fc3a5-16b8-4e2c-9fea-5cb5888e977f.json b/change/@fluentui-react-charts-preview-4a4fc3a5-16b8-4e2c-9fea-5cb5888e977f.json
new file mode 100644
index 0000000000000..3a6a90f2946e2
--- /dev/null
+++ b/change/@fluentui-react-charts-preview-4a4fc3a5-16b8-4e2c-9fea-5cb5888e977f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Introduce gradients and rounded corners to v9 charts",
+  "packageName": "@fluentui/react-charts-preview",
+  "email": "shawngrant333@gmail.com",
+  "dependentChangeType": "patch"
+}

From 8a3d7bf456414f03680abda9667e944d7cac420a Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Fri, 22 Nov 2024 02:50:35 +0000
Subject: [PATCH 16/19] update change type to patch

---
 ...harts-preview-d9ff82b5-6274-429e-8f9d-bd400e647d4b.json | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 change/@fluentui-react-charts-preview-d9ff82b5-6274-429e-8f9d-bd400e647d4b.json

diff --git a/change/@fluentui-react-charts-preview-d9ff82b5-6274-429e-8f9d-bd400e647d4b.json b/change/@fluentui-react-charts-preview-d9ff82b5-6274-429e-8f9d-bd400e647d4b.json
deleted file mode 100644
index 4ec30c7f49f8e..0000000000000
--- a/change/@fluentui-react-charts-preview-d9ff82b5-6274-429e-8f9d-bd400e647d4b.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "Introduce gradients and rounded corners to v9 charts",
-  "packageName": "@fluentui/react-charts-preview",
-  "email": "shawngrant333@gmail.com",
-  "dependentChangeType": "patch"
-}

From c58d7af66c7cb2bb11f24ca1c290da4712e39875 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Fri, 22 Nov 2024 04:02:50 +0000
Subject: [PATCH 17/19] build: fix formatting issues

---
 .../library/src/components/DonutChart/Arc/Arc.tsx           | 6 +-----
 .../library/src/components/DonutChart/DonutChart.tsx        | 4 ++--
 .../components/HorizontalBarChart/HorizontalBarChart.tsx    | 2 +-
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx b/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx
index 3116770b8d236..dff6ed1b66b8c 100644
--- a/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/DonutChart/Arc/Arc.tsx
@@ -106,11 +106,7 @@ export const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivEl
       <g ref={currentRef}>
         {!!focusedArcId && focusedArcId === id && (
           // TODO innerradius and outerradius were absent
-          <path
-            id={id + 'focusRing'}
-            d={focusPathData}
-            className={classes.focusRing}
-          />
+          <path id={id + 'focusRing'} d={focusPathData} className={classes.focusRing} />
         )}
         <path
           // TODO innerradius and outerradius were absent
diff --git a/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.tsx b/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.tsx
index f89e0eb5afe53..0c4b43642db4c 100644
--- a/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/DonutChart/DonutChart.tsx
@@ -193,8 +193,8 @@ const DonutChartBase: React.FunctionComponent<DonutChartProps> = React.forwardRe
     function _addDefaultGradients(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {
       return donutChartDataPoint
         ? donutChartDataPoint.map((item, index) => {
-          return { ...item, gradient: item.gradient ?? getNextGradient(index, 0) };
-        })
+            return { ...item, gradient: item.gradient ?? getNextGradient(index, 0) };
+          })
         : [];
     }
 
diff --git a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
index dd31f2d907108..27bbbf49aaa2b 100644
--- a/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
+++ b/packages/charts/react-charts-preview/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
@@ -234,7 +234,7 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
       return (
         <React.Fragment key={index}>
           <defs>
-            <linearGradient id={gradientId} className='HBC_gradient'>
+            <linearGradient id={gradientId} className="HBC_gradient">
               <stop offset="0" stopColor={point.gradient?.[0]} />
               <stop offset="100%" stopColor={point.gradient?.[1]} />
             </linearGradient>

From 0cc5413388fdf8e35fa99a7555b7eef0bb3b1811 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Fri, 22 Nov 2024 05:29:22 +0000
Subject: [PATCH 18/19] build: fix ci fail (vr-tests-react-components)

---
 .../src/stories/Charts/DonutChart.stories.tsx | 12 +++---
 .../Charts/HorizontalBarChart.stories.tsx     | 38 +++++++++----------
 .../library/etc/react-virtualizer.api.md      | 11 ++----
 3 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx
index d8f99d1ea3d3d..f80801046db6e 100644
--- a/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx
@@ -18,8 +18,8 @@ export default {
 
 export const Basic = () => {
   const points: ChartDataPoint[] = [
-    { legend: 'first', data: 20000, color: '#DADADA', xAxisCalloutData: '2020/04/30' },
-    { legend: 'second', data: 39000, color: '#0078D4', xAxisCalloutData: '2020/04/20' },
+    { legend: 'first', data: 20000, gradient: ['#DADADA', '#DADADA'], xAxisCalloutData: '2020/04/30' },
+    { legend: 'second', data: 39000, gradient: ['#0078D4', '#0078D4'], xAxisCalloutData: '2020/04/20' },
   ];
 
   const data: ChartProps = {
@@ -54,22 +54,22 @@ export const Dynamic = () => {
       {
         legend: 'first',
         data: Math.floor(120),
-        color: '#00bcf2',
+        gradient: ['#00bcf2', '#00bcf2'],
       },
       {
         legend: 'second',
         data: Math.floor(130),
-        color: '#b4a0ff',
+        gradient: ['#b4a0ff', '#b4a0ff'],
       },
       {
         legend: 'third',
         data: Math.floor(10),
-        color: '#fff100',
+        gradient: ['#fff100', '#fff100'],
       },
       {
         legend: 'fourth',
         data: Math.floor(270),
-        color: '#605e5c',
+        gradient: ['#605e5c', '#605e5c'],
       },
     ],
   };
diff --git a/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx
index be0c4ff1e088b..267cc5a099f06 100644
--- a/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx
@@ -35,7 +35,7 @@ export const Basic = () => {
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: '#4cb4b7',
+          gradient: ['#4cb4b7', '#4cb4b7'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '10%',
         },
@@ -47,7 +47,7 @@ export const Basic = () => {
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: '#800080',
+          gradient: ['#800080', '#800080'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '5%',
         },
@@ -59,7 +59,7 @@ export const Basic = () => {
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: '#ff0000',
+          gradient: ['#ff0000', '#ff0000'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '59%',
         },
@@ -71,7 +71,7 @@ export const Basic = () => {
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: '#fbc0c3',
+          gradient: ['#fbc0c3', '#fbc0c3'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '105%',
         },
@@ -83,7 +83,7 @@ export const Basic = () => {
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: '#f7630c',
+          gradient: ['#f7630c', '#f7630c'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '76%',
         },
@@ -95,7 +95,7 @@ export const Basic = () => {
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: '#107c10',
+          gradient: ['#107c10', '#107c10'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '93%',
         },
@@ -107,7 +107,7 @@ export const Basic = () => {
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: '#6e0811',
+          gradient: ['#6e0811', '#6e0811'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '65%',
         },
@@ -119,7 +119,7 @@ export const Basic = () => {
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: '#3a96dd',
+          gradient: ['#3a96dd', '#3a96dd'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '28%',
         },
@@ -149,7 +149,7 @@ export const WithBenchmark = () => {
           legend: 'one',
           data: 50,
           horizontalBarChartdata: { x: 10, y: 100 },
-          color: '#4cb4b7',
+          gradient: ['#4cb4b7', '#4cb4b7'],
         },
       ],
     },
@@ -160,7 +160,7 @@ export const WithBenchmark = () => {
           legend: 'two',
           data: 30,
           horizontalBarChartdata: { x: 30, y: 200 },
-          color: '#800080',
+          gradient: ['#800080', '#800080'],
         },
       ],
     },
@@ -171,7 +171,7 @@ export const WithBenchmark = () => {
           legend: 'three',
           data: 5,
           horizontalBarChartdata: { x: 15, y: 50 },
-          color: '#ff0000',
+          gradient: ['#ff0000', '#ff0000'],
         },
       ],
     },
@@ -198,7 +198,7 @@ export const Variant = () => {
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: '#4cb4b7',
+          gradient: ['#4cb4b7', '#4cb4b7'],
         },
       ],
     },
@@ -208,7 +208,7 @@ export const Variant = () => {
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: '#800080',
+          gradient: ['#800080', '#800080'],
         },
       ],
     },
@@ -218,7 +218,7 @@ export const Variant = () => {
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: '#ff0000',
+          gradient: ['#ff0000', '#ff0000'],
         },
       ],
     },
@@ -228,7 +228,7 @@ export const Variant = () => {
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: '#fbc0c3',
+          gradient: ['#fbc0c3', '#fbc0c3'],
         },
       ],
     },
@@ -238,7 +238,7 @@ export const Variant = () => {
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: '#f7630c',
+          gradient: ['#f7630c', '#f7630c'],
         },
       ],
     },
@@ -248,7 +248,7 @@ export const Variant = () => {
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: '#107c10',
+          gradient: ['#107c10', '#107c10'],
         },
       ],
     },
@@ -258,7 +258,7 @@ export const Variant = () => {
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: '#6e0811',
+          gradient: ['#6e0811', '#6e0811'],
         },
       ],
     },
@@ -268,7 +268,7 @@ export const Variant = () => {
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: '#3a96dd',
+          gradient: ['#3a96dd', '#3a96dd'],
         },
       ],
     },
diff --git a/packages/react-components/react-virtualizer/library/etc/react-virtualizer.api.md b/packages/react-components/react-virtualizer/library/etc/react-virtualizer.api.md
index 6b3c901b351b6..3bcd16bcd6814 100644
--- a/packages/react-components/react-virtualizer/library/etc/react-virtualizer.api.md
+++ b/packages/react-components/react-virtualizer/library/etc/react-virtualizer.api.md
@@ -6,10 +6,7 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import type { FC } from 'react';
-import type { MutableRefObject } from 'react';
 import * as React_2 from 'react';
-import type { RefObject } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -132,7 +129,7 @@ export const useVirtualizerScrollViewStyles_unstable: (state: VirtualizerScrollV
 export const useVirtualizerStyles_unstable: (state: VirtualizerState) => VirtualizerState;
 
 // @public
-export const Virtualizer: FC<VirtualizerProps>;
+export const Virtualizer: React_2.FC<VirtualizerProps>;
 
 // @public
 export type VirtualizerChildRenderFunction = (index: number, isScrolling: boolean) => React_2.ReactNode;
@@ -152,10 +149,10 @@ export const VirtualizerContextProvider: React_2.Provider<VirtualizerContextProp
 
 // @public (undocumented)
 export type VirtualizerDataRef = {
-    progressiveSizes: RefObject<number[]>;
-    nodeSizes: RefObject<number[]>;
+    progressiveSizes: React_2.RefObject<number[]>;
+    nodeSizes: React_2.RefObject<number[]>;
     setFlaggedIndex: (index: number | null) => void;
-    currentIndex: RefObject<number>;
+    currentIndex: React_2.RefObject<number>;
 };
 
 // @public (undocumented)

From f75812e28a841da850e4b1a71dd29104a5c5b4c3 Mon Sep 17 00:00:00 2001
From: shawn-grant <shawngrant333@gmail.com>
Date: Fri, 22 Nov 2024 06:11:52 +0000
Subject: [PATCH 19/19] add change file

---
 ...t-virtualizer-5968650e-f0eb-40bc-908a-49286af1ddbd.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-virtualizer-5968650e-f0eb-40bc-908a-49286af1ddbd.json

diff --git a/change/@fluentui-react-virtualizer-5968650e-f0eb-40bc-908a-49286af1ddbd.json b/change/@fluentui-react-virtualizer-5968650e-f0eb-40bc-908a-49286af1ddbd.json
new file mode 100644
index 0000000000000..aa1cdf61c82ce
--- /dev/null
+++ b/change/@fluentui-react-virtualizer-5968650e-f0eb-40bc-908a-49286af1ddbd.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "updated to use gradient property for charts-preview",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "shawngrant333@gmail.com",
+  "dependentChangeType": "none"
+}