diff --git a/change/@fluentui-react-charting-07085de4-08a0-49db-91db-76677708e0e3.json b/change/@fluentui-react-charting-07085de4-08a0-49db-91db-76677708e0e3.json
new file mode 100644
index 0000000000000..b49e300e5f838
--- /dev/null
+++ b/change/@fluentui-react-charting-07085de4-08a0-49db-91db-76677708e0e3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix style issue for tree chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "98592573+AtishayMsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/TreeChart/TreeChart.styles.ts b/packages/react-charting/src/components/TreeChart/TreeChart.styles.ts
index 134c59cf5ecc8..a445748bc1d47 100644
--- a/packages/react-charting/src/components/TreeChart/TreeChart.styles.ts
+++ b/packages/react-charting/src/components/TreeChart/TreeChart.styles.ts
@@ -12,7 +12,7 @@ export const getStyles = (props: ITreeStyleProps): ITreeStyles => {
     ],
     link: {
       fill: 'none',
-      stroke: '#A1A1A1',
+      stroke: props.theme!.palette.neutralSecondary,
       strokeWidth: '2px',
     },
     rectNode: {
diff --git a/packages/react-charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap b/packages/react-charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap
index 68375a9716c7e..ccbfdc5e939c7 100644
--- a/packages/react-charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap
+++ b/packages/react-charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap
@@ -909,7 +909,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"
@@ -920,7 +920,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M321.25,205.2173913043478 V230
     H208.75 H433.75"
@@ -931,7 +931,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M583.75,205.2173913043478 V230
     H471.25 H696.25"
@@ -942,7 +942,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M846.25,205.2173913043478 V230
     H733.75 H958.75"
@@ -953,7 +953,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M1108.75,205.2173913043478 V230
     H996.25 H1221.25"
@@ -1873,7 +1873,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"
@@ -1884,7 +1884,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M321.25,205.2173913043478 V230
     H208.75 H433.75"
@@ -1895,7 +1895,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M583.75,205.2173913043478 V230
     H471.25 H696.25"
@@ -1906,7 +1906,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M846.25,205.2173913043478 V230
     H733.75 H958.75"
@@ -1917,7 +1917,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M1108.75,205.2173913043478 V230
     H996.25 H1221.25"
@@ -2837,7 +2837,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"
@@ -2848,7 +2848,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M321.25,205.2173913043478 V230
     H208.75 H433.75"
@@ -2859,7 +2859,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M583.75,205.2173913043478 V230
     H471.25 H696.25"
@@ -2870,7 +2870,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M846.25,205.2173913043478 V230
     H733.75 H958.75"
@@ -2881,7 +2881,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M1108.75,205.2173913043478 V230
     H996.25 H1221.25"
@@ -3233,7 +3233,7 @@ subText Subtext val is subtext Parent info parentId: 0
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"
diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx
index 666fa066a6ca3..e4be8bbe281b8 100644
--- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx
@@ -34,31 +34,31 @@ export class AreaChartCustomAccessibilityExample extends React.Component<{}, IAr
         x: 20,
         y: 9,
         xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 20' },
-        callOutAccessibilityData: { ariaLabel: 'Line series 1 of 5 Point 1 First 9' },
+        callOutAccessibilityData: { ariaLabel: 'Point 1 of 5 in First series. X value 20 Y value $9' },
       },
       {
         x: 40,
         y: 20,
         xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 40' },
-        callOutAccessibilityData: { ariaLabel: 'Line series 2 of 5 Point 1 First 20' },
+        callOutAccessibilityData: { ariaLabel: 'Point 2 of 5 in First series. X value 40 Y value $20' },
       },
       {
         x: 55,
         y: 27,
         xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 55' },
-        callOutAccessibilityData: { ariaLabel: 'Line series 3 of 5 Point 1 First 27' },
+        callOutAccessibilityData: { ariaLabel: 'Point 3 of 5 in First series. X value 55 Y value $27' },
       },
       {
         x: 60,
         y: 37,
         xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 60' },
-        callOutAccessibilityData: { ariaLabel: 'Line series 4 of 5 Point 1 First 37' },
+        callOutAccessibilityData: { ariaLabel: 'Point 4 of 5 in First series. X value 60 Y value $37' },
       },
       {
         x: 65,
         y: 51,
         xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 65' },
-        callOutAccessibilityData: { ariaLabel: 'Line series 5 of 5 Point 1 First 51' },
+        callOutAccessibilityData: { ariaLabel: 'Point 5 of 5 in First series. X value 65 Y value $51' },
       },
     ];
 
@@ -66,27 +66,37 @@ export class AreaChartCustomAccessibilityExample extends React.Component<{}, IAr
       {
         x: 20,
         y: 21,
-        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 21' },
+        callOutAccessibilityData: {
+          ariaLabel: 'First of 5 points in Second series. X coordinate is 20 and Y coordinate is $21',
+        },
       },
       {
         x: 40,
         y: 25,
-        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 25' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Second of 5 points in Second series. X coordinate is 40 and Y coordinate is $25',
+        },
       },
       {
         x: 55,
         y: 23,
-        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 23' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Third of 5 points in Second series. X coordinate is 55 and Y coordinate is $23',
+        },
       },
       {
         x: 60,
         y: 7,
-        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 7' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Fourth of 5 points in Second series. X coordinate is 60 and Y coordinate is $7',
+        },
       },
       {
         x: 65,
         y: 55,
-        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 55' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Fifth of 5 points in Second series. X coordinate is 65 and Y coordinate is $55',
+        },
       },
     ];
 
@@ -94,27 +104,37 @@ export class AreaChartCustomAccessibilityExample extends React.Component<{}, IAr
       {
         x: 20,
         y: 30,
-        callOutAccessibilityData: { ariaLabel: 'Point 3 Third 30' },
+        callOutAccessibilityData: {
+          ariaLabel: 'First of 5 points in Third series. X coordinate is 20 and Y coordinate is $30',
+        },
       },
       {
         x: 40,
         y: 35,
-        callOutAccessibilityData: { ariaLabel: 'Point 3 Third 35' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Second of 5 points in Third series. X coordinate is 40 and Y coordinate is $35',
+        },
       },
       {
         x: 55,
         y: 33,
-        callOutAccessibilityData: { ariaLabel: 'Point 3 Third 33' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Third of 5 points in Third series. X coordinate is 55 and Y coordinate is $33',
+        },
       },
       {
         x: 60,
         y: 40,
-        callOutAccessibilityData: { ariaLabel: 'Point 3 Third 40' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Fourth of 5 points in Third series. X coordinate is 60 and Y coordinate is $40',
+        },
       },
       {
         x: 65,
         y: 10,
-        callOutAccessibilityData: { ariaLabel: 'Point 3 Third 10' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Fifth of 5 points in Third series. X coordinate is 65 and Y coordinate is $10',
+        },
       },
     ];
 
diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx
index 1fe942bb18503..eb49c471582b9 100644
--- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx
+++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx
@@ -39,21 +39,21 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG
           {
             key: 'series1',
             data: 66,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q1 2000',
             color: getColorFromToken(DataVizPalette.color5),
             legend: 'MetaData1',
           },
           {
             key: 'series2',
             data: 13,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q2 2000',
             color: getColorFromToken(DataVizPalette.color6),
             legend: 'MetaData2',
           },
           {
             key: 'series3',
             data: 34,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q3 2000',
             color: getColorFromToken(DataVizPalette.color7),
             legend: 'MetaData3',
           },
@@ -65,21 +65,21 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG
           {
             key: 'series1',
             data: 14,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q1 2010',
             color: getColorFromToken(DataVizPalette.color5),
             legend: 'MetaData1',
           },
           {
             key: 'series2',
             data: 90,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q2 2010',
             color: getColorFromToken(DataVizPalette.color6),
             legend: 'MetaData2',
           },
           {
             key: 'series3',
             data: 33,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q3 2010',
             color: getColorFromToken(DataVizPalette.color7),
             legend: 'MetaData3',
           },
@@ -91,21 +91,21 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG
           {
             key: 'series1',
             data: 54,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q1 2020',
             color: getColorFromToken(DataVizPalette.color5),
             legend: 'MetaData1',
           },
           {
             key: 'series2',
             data: 72,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q2 2020',
             color: getColorFromToken(DataVizPalette.color6),
             legend: 'MetaData2',
           },
           {
             key: 'series3',
             data: 18,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q3 2020',
             color: getColorFromToken(DataVizPalette.color7),
             legend: 'MetaData3',
           },
diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.CustomAccessibility.Example.tsx
index 14508fe0ce624..40b3a45080fe8 100644
--- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.CustomAccessibility.Example.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { HeatMapChart, IHeatMapChartDataPoint, IHeatMapChartProps } from '@fluentui/react-charting';
+import { Label } from '@fluentui/react';
 import { formatPrefix as d3FormatPrefix } from 'd3-format';
 
 const yPoint: string[] = ['CHN', 'IND', 'USA', 'IDN', 'PAK'];
@@ -112,7 +113,7 @@ export class HeatMapChartCustomAccessibilityExample extends React.Component<{},
           onChange={this._onHeightChange}
           aria-valuetext={`ChangeHeightSlider${this.state.height}`}
         />
-        <p>Heat map showing population growth over decades</p>
+        <Label>Heat map showing population growth over decades</Label>
         <div style={rootStyle}>
           <HeatMapChart
             chartTitle="Heat map chart custom accessibility example"
diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx
index 79304738e30c6..29d885267a2e8 100644
--- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx
+++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { HeatMapChart, IHeatMapChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting';
+import { Label } from '@fluentui/react';
 
 interface IHeatMapChartBasicExampleState {
   width: number;
@@ -319,7 +320,7 @@ export class HeatMapChartBasicExample extends React.Component<{}, IHeatMapChartB
           onChange={this._onHeightChange}
           aria-valuetext={`ChangeHeightSlider${this.state.height}`}
         />
-        <p>Heat map explaining the Air Quality Index</p>
+        <Label>Heat map explaining the Air Quality Index</Label>
         <div style={rootStyle}>
           <HeatMapChart
             culture={window.navigator.language}
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
index 1ad94e0118220..e461b51793788 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx
@@ -80,7 +80,7 @@ export class HorizontalBarChartBasicExample extends React.Component<
             horizontalBarChartdata: { x: 15888, y: 15000 },
             color: getColorFromToken(DataVizPalette.color4),
             xAxisCalloutData: '2020/04/30',
-            yAxisCalloutData: '105%',
+            yAxisCalloutData: '106%',
           },
         ],
       },
@@ -116,7 +116,7 @@ export class HorizontalBarChartBasicExample extends React.Component<
             horizontalBarChartdata: { x: 9855, y: 15000 },
             color: getColorFromToken(DataVizPalette.color7),
             xAxisCalloutData: '2020/04/30',
-            yAxisCalloutData: '65%',
+            yAxisCalloutData: '66%',
           },
         ],
       },
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx
index aefc6a8fa3aa8..072edb54d440f 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx
@@ -1,7 +1,13 @@
 import * as React from 'react';
 import { HorizontalBarChart, IChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting';
+import { ThemeContext } from '@fluentui/react';
 
 export const HorizontalBarChartCustomAccessibilityExample: React.FunctionComponent<{}> = () => {
+  const IsDarkMode = () => {
+    const theme = React.useContext(ThemeContext);
+    return theme?.isInverted;
+  };
+
   const data: IChartProps[] = [
     {
       chartTitle: 'one',
@@ -11,10 +17,10 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color9),
+          color: getColorFromToken(DataVizPalette.color9, IsDarkMode()),
           xAxisCalloutData: '2021/06/10',
           yAxisCalloutData: '10%',
-          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart one 2021/06/10 41%' },
+          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart one 2021/06/10 10%' },
         },
       ],
     },
@@ -26,10 +32,10 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color10),
+          color: getColorFromToken(DataVizPalette.color10, IsDarkMode()),
           xAxisCalloutData: '2021/06/11',
           yAxisCalloutData: '5%',
-          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart two 2021/06/11 52%' },
+          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart two 2021/06/11 5%' },
         },
       ],
     },
@@ -41,10 +47,10 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color11),
+          color: getColorFromToken(DataVizPalette.color11, IsDarkMode()),
           xAxisCalloutData: '2021/06/12',
           yAxisCalloutData: '59%',
-          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart three 2021/06/12 63%' },
+          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart three 2021/06/12 59%' },
         },
       ],
     },
@@ -56,10 +62,10 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color12),
+          color: getColorFromToken(DataVizPalette.color12, IsDarkMode()),
           xAxisCalloutData: '2021/06/13',
           yAxisCalloutData: '105%',
-          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart four 2021/06/13 74%' },
+          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart four 2021/06/13 105%' },
         },
       ],
     },
@@ -71,10 +77,10 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color13),
+          color: getColorFromToken(DataVizPalette.color13, IsDarkMode()),
           xAxisCalloutData: '2021/06/14',
           yAxisCalloutData: '76%',
-          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart five 2021/06/14 85%' },
+          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart five 2021/06/14 76%' },
         },
       ],
     },
@@ -86,10 +92,10 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color14),
+          color: getColorFromToken(DataVizPalette.color14, IsDarkMode()),
           xAxisCalloutData: '2021/06/15',
           yAxisCalloutData: '93%',
-          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart six 2021/06/15 96%' },
+          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart six 2021/06/15 93%' },
         },
       ],
     },
@@ -101,10 +107,10 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color15),
+          color: getColorFromToken(DataVizPalette.color15, IsDarkMode()),
           xAxisCalloutData: '2021/06/16',
           yAxisCalloutData: '65%',
-          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart seven 2021/06/16 98%' },
+          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart seven 2021/06/16 65%' },
         },
       ],
     },
@@ -116,10 +122,10 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color16),
+          color: getColorFromToken(DataVizPalette.color16, IsDarkMode()),
           xAxisCalloutData: '2021/06/17',
           yAxisCalloutData: '28%',
-          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart eight 2021/06/17 99%' },
+          callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart eight 2021/06/17 28%' },
         },
       ],
     },
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx
index 12d8fbaf48da1..29ecf8630386e 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx
@@ -7,12 +7,17 @@ import {
   DataVizPalette,
   getColorFromToken,
 } from '@fluentui/react-charting';
-import { DirectionalHint } from '@fluentui/react';
+import { DirectionalHint, ThemeContext } from '@fluentui/react';
 import * as d3 from 'd3-format';
 
 export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> = () => {
   const hideRatio: boolean[] = [true, false];
 
+  const IsDarkMode = () => {
+    const theme = React.useContext(ThemeContext);
+    return theme?.isInverted;
+  };
+
   const data: IChartProps[] = [
     {
       chartTitle: 'one',
@@ -20,7 +25,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}>
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color28),
+          color: getColorFromToken(DataVizPalette.color28, IsDarkMode()),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '1.5K',
         },
@@ -32,7 +37,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}>
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color29),
+          color: getColorFromToken(DataVizPalette.color29, IsDarkMode()),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '800',
         },
@@ -44,7 +49,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}>
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color30),
+          color: getColorFromToken(DataVizPalette.color30, IsDarkMode()),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '8.8K',
         },
@@ -56,7 +61,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}>
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color31),
+          color: getColorFromToken(DataVizPalette.color31, IsDarkMode()),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '16K',
         },
@@ -68,7 +73,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}>
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color32),
+          color: getColorFromToken(DataVizPalette.color32, IsDarkMode()),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '11K',
         },
@@ -80,7 +85,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}>
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color33),
+          color: getColorFromToken(DataVizPalette.color33, IsDarkMode()),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '14K',
         },
@@ -92,7 +97,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}>
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color34),
+          color: getColorFromToken(DataVizPalette.color34, IsDarkMode()),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '9.9K',
         },
@@ -104,7 +109,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}>
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: getColorFromToken(DataVizPalette.color35),
+          color: getColorFromToken(DataVizPalette.color35, IsDarkMode()),
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '4.3K',
         },
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx
index bfbba8456caeb..62a5d9ceb07a5 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx
@@ -6,6 +6,7 @@ import {
   DataVizPalette,
   getColorFromToken,
 } from '@fluentui/react-charting';
+import { ThemeContext } from '@fluentui/react';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
 
 interface IHBCVariantExampleState {
@@ -22,6 +23,11 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa
   }
 
   public render() {
+    const IsDarkMode = () => {
+      const theme = React.useContext(ThemeContext);
+      return theme?.isInverted;
+    };
+
     const data: IChartProps[] = [
       {
         chartTitle: 'one',
@@ -29,7 +35,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa
           {
             legend: 'one',
             horizontalBarChartdata: { x: 1543, y: 15000 },
-            color: getColorFromToken(DataVizPalette.color17),
+            color: getColorFromToken(DataVizPalette.color17, IsDarkMode()),
           },
         ],
       },
@@ -39,7 +45,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa
           {
             legend: 'two',
             horizontalBarChartdata: { x: 800, y: 15000 },
-            color: getColorFromToken(DataVizPalette.color18),
+            color: getColorFromToken(DataVizPalette.color18, IsDarkMode()),
           },
         ],
       },
@@ -49,7 +55,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa
           {
             legend: 'three',
             horizontalBarChartdata: { x: 8888, y: 15000 },
-            color: getColorFromToken(DataVizPalette.color19),
+            color: getColorFromToken(DataVizPalette.color19, IsDarkMode()),
           },
         ],
       },
@@ -59,7 +65,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa
           {
             legend: 'four',
             horizontalBarChartdata: { x: 15888, y: 15000 },
-            color: getColorFromToken(DataVizPalette.color20),
+            color: getColorFromToken(DataVizPalette.color20, IsDarkMode()),
           },
         ],
       },
@@ -69,7 +75,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa
           {
             legend: 'five',
             horizontalBarChartdata: { x: 11444, y: 15000 },
-            color: getColorFromToken(DataVizPalette.color21),
+            color: getColorFromToken(DataVizPalette.color21, IsDarkMode()),
           },
         ],
       },
@@ -79,7 +85,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa
           {
             legend: 'six',
             horizontalBarChartdata: { x: 14000, y: 15000 },
-            color: getColorFromToken(DataVizPalette.color22),
+            color: getColorFromToken(DataVizPalette.color22, IsDarkMode()),
           },
         ],
       },
@@ -89,7 +95,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa
           {
             legend: 'seven',
             horizontalBarChartdata: { x: 9855, y: 15000 },
-            color: getColorFromToken(DataVizPalette.color23),
+            color: getColorFromToken(DataVizPalette.color23, IsDarkMode()),
           },
         ],
       },
@@ -99,7 +105,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa
           {
             legend: 'eight',
             horizontalBarChartdata: { x: 4250, y: 15000 },
-            color: getColorFromToken(DataVizPalette.color24),
+            color: getColorFromToken(DataVizPalette.color24, IsDarkMode()),
           },
         ],
       },
diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx
index d168bde86803d..4dbefb0d69569 100644
--- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx
+++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx
@@ -1,84 +1,90 @@
 import * as React from 'react';
-import { IChartDataPoint, MultiStackedBarChart, IChartProps } from '@fluentui/react-charting';
+import {
+  IChartDataPoint,
+  MultiStackedBarChart,
+  IChartProps,
+  DataVizPalette,
+  getColorFromToken,
+} from '@fluentui/react-charting';
 
 export const MultiStackedBarChartBasicExample: React.FunctionComponent = () => {
   const firstChartPoints: IChartDataPoint[] = [
     {
       legend: 'Debit card numbers (EU and USA)',
       data: 40,
-      color: '#0099BC',
+      color: getColorFromToken(DataVizPalette.color1),
       callOutAccessibilityData: { ariaLabel: 'Bar series 1 of 13 Debit card numbers (EU and USA) 40' },
     },
     {
       legend: 'Passport numbers (USA)',
       data: 23,
-      color: '#77004D',
+      color: getColorFromToken(DataVizPalette.color2),
       callOutAccessibilityData: { ariaLabel: 'Bar series 2 of 13 Passport numbers (USA) 23' },
     },
     {
       legend: 'Social security numbers',
       data: 35,
-      color: '#4F68ED',
+      color: getColorFromToken(DataVizPalette.color3),
       callOutAccessibilityData: { ariaLabel: 'Bar series 3 of 13 Social security numbers 35' },
     },
     {
       legend: 'Credit card numbers',
       data: 87,
-      color: '#AE8C00',
+      color: getColorFromToken(DataVizPalette.color4),
       callOutAccessibilityData: { ariaLabel: 'Bar series 4 of 13 Credit card numbers 87' },
     },
     {
       legend: 'Tax identification numbers (USA)',
       data: 87,
-      color: '#004E8C',
+      color: getColorFromToken(DataVizPalette.color5),
       callOutAccessibilityData: { ariaLabel: 'Bar series 5 of 13 Tax identification numbers (USA) 87' },
     },
     {
       legend: "Driver's license numbers (USA)",
       data: 0.5,
-      color: '#00A6A6',
+      color: getColorFromToken(DataVizPalette.color6),
       callOutAccessibilityData: { ariaLabel: "Bar series 6 of 13 Driver's license numbers (USA) 0.5" },
     },
     {
       legend: 'Email addresses',
       data: 0.5,
-      color: '#FF5733',
+      color: getColorFromToken(DataVizPalette.color7),
       callOutAccessibilityData: { ariaLabel: 'Bar series 7 of 13 Email addresses 0.5' },
     },
     {
       legend: 'Phone numbers',
       data: 0.5,
-      color: '#7E2F8E',
+      color: getColorFromToken(DataVizPalette.color8),
       callOutAccessibilityData: { ariaLabel: 'Bar series 8 of 13 Phone numbers 0.5' },
     },
     {
       legend: 'Health insurance numbers',
       data: 0.5,
-      color: '#00B300',
+      color: getColorFromToken(DataVizPalette.color9),
       callOutAccessibilityData: { ariaLabel: 'Bar series 9 of 13 Health insurance numbers 0.5' },
     },
     {
       legend: 'Bank account numbers',
       data: 0.5,
-      color: '#8C4D00',
+      color: getColorFromToken(DataVizPalette.color10),
       callOutAccessibilityData: { ariaLabel: 'Bar series 10 of 13 Bank account numbers 0.5' },
     },
     {
       legend: 'Employee identification numbers',
       data: 0.5,
-      color: '#B34D9A',
+      color: getColorFromToken(DataVizPalette.color11),
       callOutAccessibilityData: { ariaLabel: 'Bar series 11 of 13 Employee identification numbers 0.5' },
     },
     {
       legend: 'Vehicle registration numbers',
       data: 0.5,
-      color: '#FF9A00',
+      color: getColorFromToken(DataVizPalette.color12),
       callOutAccessibilityData: { ariaLabel: 'Bar series 12 of 13 Vehicle registration numbers 0.5' },
     },
     {
       legend: 'Student identification numbers',
       data: 0.5,
-      color: '#007E00',
+      color: getColorFromToken(DataVizPalette.color13),
       callOutAccessibilityData: { ariaLabel: 'Bar series 13 of 13 Student identification numbers 0.5' },
     },
   ];
@@ -86,31 +92,31 @@ export const MultiStackedBarChartBasicExample: React.FunctionComponent = () => {
     {
       legend: 'Debit card numbers (EU and USA)',
       data: 40,
-      color: '#0099BC',
+      color: getColorFromToken(DataVizPalette.color1),
       callOutAccessibilityData: { ariaLabel: 'Bar series 1 of 5 Debit card numbers (EU and USA) 40' },
     },
     {
       legend: 'Passport numbers (USA)',
       data: 56,
-      color: '#77004D',
+      color: getColorFromToken(DataVizPalette.color2),
       callOutAccessibilityData: { ariaLabel: 'Bar series 2 of 5 Passport numbers (USA) 56' },
     },
     {
       legend: 'Social security numbers',
       data: 35,
-      color: '#4F68ED',
+      color: getColorFromToken(DataVizPalette.color3),
       callOutAccessibilityData: { ariaLabel: 'Bar series 3 of 5 Social security numbers 35' },
     },
     {
       legend: 'Credit card numbers',
       data: 92,
-      color: '#AE8C00',
+      color: getColorFromToken(DataVizPalette.color4),
       callOutAccessibilityData: { ariaLabel: 'Bar series 4 of 5 Credit card numbers 92' },
     },
     {
       legend: 'Tax identification numbers (USA)',
       data: 87,
-      color: '#004E8C',
+      color: getColorFromToken(DataVizPalette.color5),
       callOutAccessibilityData: { ariaLabel: 'Bar series 5 of 5 Tax identification numbers (USA) 87' },
     },
   ];
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.BaseBar.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.BaseBar.Example.tsx
index 70bbc80a4f6db..e5d7006d3110a 100644
--- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.BaseBar.Example.tsx
+++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.BaseBar.Example.tsx
@@ -21,7 +21,7 @@ export class StackedBarChartBaseBarExample extends React.Component<{}, {}> {
     return (
       <StackedBarChart
         data={data}
-        barBackgroundColor={DefaultPalette.neutralTertiary}
+        barBackgroundColor={DefaultPalette.neutralSecondary}
         href={'https://developer.microsoft.com/en-us/'}
       />
     );
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx
index 24cb6603b56c0..64d76d3dc28dc 100644
--- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx
@@ -23,7 +23,7 @@ export class StackedBarChartCustomAccessibilityExample extends React.Component<{
         color: DefaultPalette.blue,
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '99%',
-        callOutAccessibilityData: { ariaLabel: 'Bar series 1 of 1 2020/04/30 40%' },
+        callOutAccessibilityData: { ariaLabel: 'Bar series 1 of 1 2020/04/30 99%' },
       },
       { legend: 'second', data: 1, color: DefaultPalette.green },
     ];
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Dynamic.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Dynamic.Example.tsx
index 14e7061403f28..f1f7104337d05 100644
--- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Dynamic.Example.tsx
+++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Dynamic.Example.tsx
@@ -5,6 +5,8 @@ import {
   IChartProps,
   StackedBarChart,
   IStackedBarChartProps,
+  DataVizPalette,
+  getColorFromToken,
 } from '@fluentui/react-charting';
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
 import { DefaultButton } from '@fluentui/react/lib/Button';
@@ -32,7 +34,7 @@ export class StackedBarChartDynamicExample extends React.Component<{}, IExampleS
     [
       DefaultPalette.blueMid,
       DefaultPalette.blue,
-      DefaultPalette.blueLight,
+      getColorFromToken(DataVizPalette.color6),
       DefaultPalette.tealDark,
       DefaultPalette.teal,
       DefaultPalette.tealLight,
@@ -43,13 +45,13 @@ export class StackedBarChartDynamicExample extends React.Component<{}, IExampleS
       DefaultPalette.orange,
       DefaultPalette.orangeLight,
       DefaultPalette.orangeLighter,
-      DefaultPalette.yellow,
+      getColorFromToken(DataVizPalette.color10),
       DefaultPalette.yellowLight,
     ],
     [
       DefaultPalette.greenDark,
       DefaultPalette.green,
-      DefaultPalette.greenLight,
+      getColorFromToken(DataVizPalette.color5),
       DefaultPalette.neutralPrimary,
       DefaultPalette.neutralSecondary,
       DefaultPalette.neutralTertiary,
@@ -70,10 +72,10 @@ export class StackedBarChartDynamicExample extends React.Component<{}, IExampleS
       dynamicData: {
         chartTitle: 'Stacked Bar chart',
         chartData: [
-          { legend: 'first', data: 40, color: DefaultPalette.blueLight },
-          { legend: 'second', data: 23, color: DefaultPalette.yellow },
+          { legend: 'first', data: 40, color: getColorFromToken(DataVizPalette.color6) },
+          { legend: 'second', data: 23, color: getColorFromToken(DataVizPalette.color10) },
           { legend: 'third', data: 35, color: DefaultPalette.neutralSecondary },
-          { legend: 'fourth', data: 87, color: DefaultPalette.greenLight },
+          { legend: 'fourth', data: 87, color: getColorFromToken(DataVizPalette.color5) },
         ],
       },
       statusKey: 0,
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Multiple.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Multiple.Example.tsx
index 101f614fee520..101a08123e836 100644
--- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Multiple.Example.tsx
+++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Multiple.Example.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { StackedBarChart, IChartDataPoint, IChartProps } from '@fluentui/react-charting';
+import {
+  StackedBarChart,
+  IChartDataPoint,
+  IChartProps,
+  DataVizPalette,
+  getColorFromToken,
+} from '@fluentui/react-charting';
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
 
 export class StackedBarChartMultipleExample extends React.Component<{}, {}> {
@@ -10,9 +16,9 @@ export class StackedBarChartMultipleExample extends React.Component<{}, {}> {
       {
         legend: 'This is the third legend of the chart',
         data: 35,
-        color: DefaultPalette.blueLight,
+        color: getColorFromToken(DataVizPalette.color6),
       },
-      { legend: 'This is the fourth legend of the chart', data: 87, color: DefaultPalette.greenLight },
+      { legend: 'This is the fourth legend of the chart', data: 87, color: getColorFromToken(DataVizPalette.color5) },
     ];
     const chartTitle = 'Stacked bar chart 2nd example';
 
diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompactDocSite.Example.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompactDocSite.Example.tsx
index dadbe26d9ca7d..1a75a58478a2a 100644
--- a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompactDocSite.Example.tsx
+++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompactDocSite.Example.tsx
@@ -1,50 +1,58 @@
 import * as React from 'react';
-import { TreeChart, ITreeProps, TreeTraverse, NodesComposition, ITreeState } from '@fluentui/react-charting';
+import {
+  TreeChart,
+  ITreeProps,
+  TreeTraverse,
+  NodesComposition,
+  ITreeState,
+  DataVizPalette,
+  getColorFromToken,
+} from '@fluentui/react-charting';
 const threeLayerChart = {
   name: 'Root Node',
   subname: 'subtext',
-  fill: '#0099BC',
+  fill: getColorFromToken(DataVizPalette.color4),
   children: [
     {
       name: 'Child 1',
       subname: 'subtext',
       metric: '100%',
-      fill: '#4F6BED',
+      fill: getColorFromToken(DataVizPalette.color5),
       children: [
         {
           name: 'leaf1',
           subname: 'sub',
-          fill: '#4F6BED',
+          fill: getColorFromToken(DataVizPalette.color5),
         },
         {
           name: 'leaf2',
-          fill: '#4F6BED',
+          fill: getColorFromToken(DataVizPalette.color5),
         },
         {
           name: 'leaf3',
           subname: 'The subtext is as follows: sub',
-          fill: '#FF00FF',
+          fill: getColorFromToken(DataVizPalette.color6),
         },
         {
           name: 'leaf4',
           subname: 'sub',
-          fill: '#FF00FF',
+          fill: getColorFromToken(DataVizPalette.color6),
         },
       ],
     },
     {
       name: 'Child 2 is the child name',
-      fill: '#881798',
+      fill: getColorFromToken(DataVizPalette.color7),
       children: [
         {
           name: 'leaf5',
           subname: 'sub',
-          fill: '#AE8C00',
+          fill: getColorFromToken(DataVizPalette.color10),
         },
         {
           name: 'leaf6',
           subname: 'sub',
-          fill: '#AE8C00',
+          fill: getColorFromToken(DataVizPalette.color10),
         },
       ],
     },
diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerDocSite.Example.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerDocSite.Example.tsx
index 18c7f7b5a810c..31f43fecbb1b2 100644
--- a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerDocSite.Example.tsx
+++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerDocSite.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TreeChart, ITreeProps, ITreeState } from '@fluentui/react-charting';
+import { TreeChart, ITreeProps, ITreeState, DataVizPalette, getColorFromToken } from '@fluentui/react-charting';
 
 const threeLayerChart = {
   name: 'Root Node',
@@ -11,42 +11,42 @@ const threeLayerChart = {
       name: 'Child 1',
       subname: 'subtext',
       metric: '100%',
-      fill: '#4F6BED',
+      fill: getColorFromToken(DataVizPalette.color3),
       children: [
         {
           name: 'leaf1',
           subname: 'sub',
-          fill: '#4F6BED',
+          fill: getColorFromToken(DataVizPalette.color3),
         },
         {
           name: 'leaf2',
-          fill: '#4F6BED',
+          fill: getColorFromToken(DataVizPalette.color3),
         },
         {
           name: 'leaf3',
           subname: 'The subtext is as follows: sub',
-          fill: '#4F6BED',
+          fill: getColorFromToken(DataVizPalette.color3),
         },
         {
           name: 'leaf4',
           subname: 'sub',
-          fill: '#4F6BED',
+          fill: getColorFromToken(DataVizPalette.color3),
         },
       ],
     },
     {
       name: 'Child 2 is the child name',
-      fill: '#881798',
+      fill: getColorFromToken(DataVizPalette.color4),
       children: [
         {
           name: 'leaf5',
           subname: 'sub',
-          fill: '#881798',
+          fill: getColorFromToken(DataVizPalette.color4),
         },
         {
           name: 'leaf6',
           subname: 'sub',
-          fill: '#881798',
+          fill: getColorFromToken(DataVizPalette.color4),
         },
       ],
     },
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx
index fd0748d247fb6..e21ca817eb425 100644
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx
@@ -4,6 +4,8 @@ import {
   IVerticalBarChartProps,
   IVerticalBarChartDataPoint,
   ILineChartLineOptions,
+  DataVizPalette,
+  getColorFromToken,
 } from '@fluentui/react-charting';
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
 import { IRenderFunction } from '@fluentui/react/lib/Utilities';
@@ -110,7 +112,7 @@ export class VerticalBarChartBasicExample extends React.Component<IVerticalBarCh
         x: 40000,
         y: 13000,
         legend: 'Bananas',
-        color: DefaultPalette.blueLight,
+        color: getColorFromToken(DataVizPalette.color6),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '5%',
       },
@@ -118,7 +120,7 @@ export class VerticalBarChartBasicExample extends React.Component<IVerticalBarCh
         x: 52000,
         y: 43000,
         legend: 'Giraffes',
-        color: DefaultPalette.blue,
+        color: getColorFromToken(DataVizPalette.color11),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '18%',
         lineData: {
@@ -142,7 +144,7 @@ export class VerticalBarChartBasicExample extends React.Component<IVerticalBarCh
         x: 80000,
         y: 20000,
         legend: 'Elephants',
-        color: DefaultPalette.blue,
+        color: getColorFromToken(DataVizPalette.color11),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '8%',
         lineData: {
@@ -154,7 +156,7 @@ export class VerticalBarChartBasicExample extends React.Component<IVerticalBarCh
         x: 92000,
         y: 45000,
         legend: 'Monkeys',
-        color: DefaultPalette.blueLight,
+        color: getColorFromToken(DataVizPalette.color6),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '19%',
         lineData: {
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.CustomAccessibility.Example.tsx
index 41ccab8007e16..a40467409a820 100644
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.CustomAccessibility.Example.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
-import { VerticalBarChart, IVerticalBarChartProps, IVerticalBarChartDataPoint } from '@fluentui/react-charting';
-import { DefaultPalette } from '@fluentui/react/lib/Styling';
+import {
+  VerticalBarChart,
+  IVerticalBarChartProps,
+  IVerticalBarChartDataPoint,
+  DataVizPalette,
+  getColorFromToken,
+} from '@fluentui/react-charting';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
 
 interface IVerticalBarChartState {
@@ -48,7 +53,11 @@ export class VerticalBarChartCustomAccessibilityExample extends React.Component<
       },
     ];
 
-    const customColors = [DefaultPalette.greenLight, DefaultPalette.green, DefaultPalette.greenDark];
+    const customColors = [
+      getColorFromToken(DataVizPalette.color8),
+      getColorFromToken(DataVizPalette.color18),
+      getColorFromToken(DataVizPalette.color28),
+    ];
 
     return (
       <>
@@ -75,6 +84,7 @@ export class VerticalBarChartCustomAccessibilityExample extends React.Component<
             colors={customColors}
             hideLegend={true}
             enableReflow={true}
+            lineLegendColor={getColorFromToken(DataVizPalette.color10)}
           />
         </div>
       </>
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Dynamic.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Dynamic.Example.tsx
index 12ada1e8d9280..0faed02392e13 100644
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Dynamic.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Dynamic.Example.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
-import { VerticalBarChart, IVerticalBarChartProps, IVerticalBarChartDataPoint } from '@fluentui/react-charting';
-import { DefaultPalette } from '@fluentui/react/lib/Styling';
+import {
+  VerticalBarChart,
+  IVerticalBarChartProps,
+  IVerticalBarChartDataPoint,
+  DataVizPalette,
+  getColorFromToken,
+} from '@fluentui/react-charting';
 import { DefaultButton } from '@fluentui/react/lib/Button';
 import { Checkbox, ChoiceGroup, IChoiceGroupOption, Label, Stack, TextField } from '@fluentui/react';
 
@@ -41,10 +46,26 @@ const xAxisTypeOptions: IChoiceGroupOption[] = [
 
 export class VerticalBarChartDynamicExample extends React.Component<IVerticalBarChartProps, IExampleState> {
   private _colors = [
-    [DefaultPalette.blueLight, DefaultPalette.blue, DefaultPalette.blueDark],
-    [DefaultPalette.orangeLighter, DefaultPalette.orangeLight, DefaultPalette.orange],
-    [DefaultPalette.greenLight, DefaultPalette.green, DefaultPalette.greenDark],
-    [DefaultPalette.magentaLight, DefaultPalette.magenta, DefaultPalette.magentaDark],
+    [
+      getColorFromToken(DataVizPalette.color1),
+      getColorFromToken(DataVizPalette.color2),
+      getColorFromToken(DataVizPalette.color3),
+    ],
+    [
+      getColorFromToken(DataVizPalette.color4),
+      getColorFromToken(DataVizPalette.color5),
+      getColorFromToken(DataVizPalette.color6),
+    ],
+    [
+      getColorFromToken(DataVizPalette.color7),
+      getColorFromToken(DataVizPalette.color8),
+      getColorFromToken(DataVizPalette.color9),
+    ],
+    [
+      getColorFromToken(DataVizPalette.color10),
+      getColorFromToken(DataVizPalette.color11),
+      getColorFromToken(DataVizPalette.color12),
+    ],
   ];
   private _colorIndex = 0;
   private _prevBarWidth = 16;
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Styled.Example.tsx
index 0e4e6d17c5fa9..27d34ee0e4737 100644
--- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Styled.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Styled.Example.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
-import { VerticalBarChart, IVerticalBarChartProps, IVerticalBarChartDataPoint } from '@fluentui/react-charting';
-import { DefaultPalette } from '@fluentui/react/lib/Styling';
+import {
+  VerticalBarChart,
+  IVerticalBarChartProps,
+  IVerticalBarChartDataPoint,
+  DataVizPalette,
+  getColorFromToken,
+} from '@fluentui/react-charting';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
 
 interface IVerticalBarChartState {
@@ -34,7 +39,11 @@ export class VerticalBarChartStyledExample extends React.Component<IVerticalBarC
       { x: 'Thirteen', y: 33 },
     ];
 
-    const customColors = [DefaultPalette.greenLight, DefaultPalette.green, DefaultPalette.greenDark];
+    const customColors = [
+      getColorFromToken(DataVizPalette.color8),
+      getColorFromToken(DataVizPalette.color18),
+      getColorFromToken(DataVizPalette.color28),
+    ];
 
     return (
       <>
@@ -60,6 +69,7 @@ export class VerticalBarChartStyledExample extends React.Component<IVerticalBarC
             yAxisTickCount={6}
             colors={customColors}
             hideLegend={true}
+            lineLegendColor={getColorFromToken(DataVizPalette.color10)}
             enableReflow={true}
           />
         </div>
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example.tsx
index 17ef7270382e1..0a95a00ea8b96 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { IVSChartDataPoint, IVerticalStackedChartProps, VerticalStackedBarChart } from '@fluentui/react-charting';
+import {
+  IVSChartDataPoint,
+  IVerticalStackedChartProps,
+  VerticalStackedBarChart,
+  DataVizPalette,
+  getColorFromToken,
+} from '@fluentui/react-charting';
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
 import { Checkbox, ChoiceGroup, IChoiceGroupOption, Label, Stack, TextField } from '@fluentui/react';
 
@@ -71,21 +77,21 @@ export class VerticalStackedBarChartTooltipExample extends React.Component<{}, I
 
   private _basicExample(): JSX.Element {
     const firstChartPoints: IVSChartDataPoint[] = [
-      { legend: 'Metadata1', data: 2, color: DefaultPalette.blue },
+      { legend: 'Metadata1', data: 2, color: getColorFromToken(DataVizPalette.color11) },
       { legend: 'Metadata2', data: 0.5, color: DefaultPalette.blueMid },
-      { legend: 'Metadata3', data: 0, color: DefaultPalette.blueLight },
+      { legend: 'Metadata3', data: 0, color: getColorFromToken(DataVizPalette.color6) },
     ];
 
     const secondChartPoints: IVSChartDataPoint[] = [
-      { legend: 'Metadata1', data: 30, color: DefaultPalette.blue },
+      { legend: 'Metadata1', data: 30, color: getColorFromToken(DataVizPalette.color11) },
       { legend: 'Metadata2', data: 3, color: DefaultPalette.blueMid },
-      { legend: 'Metadata3', data: 40, color: DefaultPalette.blueLight },
+      { legend: 'Metadata3', data: 40, color: getColorFromToken(DataVizPalette.color6) },
     ];
 
     const thirdChartPoints: IVSChartDataPoint[] = [
-      { legend: 'Metadata1', data: 10, color: DefaultPalette.blue },
+      { legend: 'Metadata1', data: 10, color: getColorFromToken(DataVizPalette.color11) },
       { legend: 'Metadata2', data: 60, color: DefaultPalette.blueMid },
-      { legend: 'Metadata3', data: 30, color: DefaultPalette.blueLight },
+      { legend: 'Metadata3', data: 30, color: getColorFromToken(DataVizPalette.color6) },
     ];
 
     const data: IVerticalStackedChartProps[] = [
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx
index fa888e82bbe44..5f7147e0db1e0 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx
@@ -4,6 +4,8 @@ import {
   IVerticalStackedChartProps,
   VerticalStackedBarChart,
   ILineChartLineOptions,
+  DataVizPalette,
+  getColorFromToken,
 } from '@fluentui/react-charting';
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
@@ -86,7 +88,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
       {
         legend: 'Metadata1',
         data: 40,
-        color: DefaultPalette.blue,
+        color: getColorFromToken(DataVizPalette.color11),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '61%',
       },
@@ -100,7 +102,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
       {
         legend: 'Metadata3',
         data: 20,
-        color: DefaultPalette.blueLight,
+        color: getColorFromToken(DataVizPalette.color6),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '31%',
       },
@@ -110,7 +112,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
       {
         legend: 'Metadata1',
         data: 30,
-        color: DefaultPalette.blue,
+        color: getColorFromToken(DataVizPalette.color11),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '33%',
       },
@@ -124,7 +126,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
       {
         legend: 'Metadata3',
         data: 40,
-        color: DefaultPalette.blueLight,
+        color: getColorFromToken(DataVizPalette.color6),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '45%',
       },
@@ -134,7 +136,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
       {
         legend: 'Metadata1',
         data: 44,
-        color: DefaultPalette.blue,
+        color: getColorFromToken(DataVizPalette.color11),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '43%',
       },
@@ -148,7 +150,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
       {
         legend: 'Metadata3',
         data: 30,
-        color: DefaultPalette.blueLight,
+        color: getColorFromToken(DataVizPalette.color6),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '30%',
       },
@@ -158,7 +160,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
       {
         legend: 'Metadata1',
         data: 88,
-        color: DefaultPalette.blue,
+        color: getColorFromToken(DataVizPalette.color11),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '63%',
       },
@@ -172,7 +174,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe
       {
         legend: 'Metadata3',
         data: 30,
-        color: DefaultPalette.blueLight,
+        color: getColorFromToken(DataVizPalette.color6),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '21%',
       },
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Callout.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Callout.Example.tsx
index 733c53c932a05..d2fb89cdf946e 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Callout.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Callout.Example.tsx
@@ -4,6 +4,8 @@ import {
   IVSChartDataPoint,
   IVerticalStackedChartProps,
   ILineChartLineOptions,
+  DataVizPalette,
+  getColorFromToken,
 } from '@fluentui/react-charting';
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
 import { DirectionalHint } from '@fluentui/react';
@@ -60,61 +62,61 @@ export class VerticalStackedBarChartCalloutExample extends React.Component<{}, I
   private _basicExample(): JSX.Element {
     const { showLine } = this.state;
     const firstChartPoints: IVSChartDataPoint[] = [
-      { legend: 'Metadata1', data: 40, color: DefaultPalette.blue },
+      { legend: 'Metadata1', data: 40, color: getColorFromToken(DataVizPalette.color11) },
       { legend: 'Metadata2', data: 5, color: DefaultPalette.blueMid },
-      { legend: 'Metadata3', data: 15, color: DefaultPalette.blueLight },
+      { legend: 'Metadata3', data: 15, color: getColorFromToken(DataVizPalette.color6) },
     ];
 
     const secondChartPoints: IVSChartDataPoint[] = [
-      { legend: 'Metadata1', data: 30, color: DefaultPalette.blue },
+      { legend: 'Metadata1', data: 30, color: getColorFromToken(DataVizPalette.color11) },
       { legend: 'Metadata2', data: 3, color: DefaultPalette.blueMid },
-      { legend: 'Metadata3', data: 40, color: DefaultPalette.blueLight },
+      { legend: 'Metadata3', data: 40, color: getColorFromToken(DataVizPalette.color6) },
     ];
 
     const thirdChartPoints: IVSChartDataPoint[] = [
-      { legend: 'Metadata1', data: 10, color: DefaultPalette.blue },
+      { legend: 'Metadata1', data: 10, color: getColorFromToken(DataVizPalette.color11) },
       { legend: 'Metadata2', data: 60, color: DefaultPalette.blueMid },
-      { legend: 'Metadata3', data: 30, color: DefaultPalette.blueLight },
+      { legend: 'Metadata3', data: 30, color: getColorFromToken(DataVizPalette.color6) },
     ];
     const fourthChartPoints: IVSChartDataPoint[] = [
-      { legend: 'Metadata1', data: 40, color: DefaultPalette.blue },
+      { legend: 'Metadata1', data: 40, color: getColorFromToken(DataVizPalette.color11) },
       { legend: 'Metadata2', data: 10, color: DefaultPalette.blueMid },
-      { legend: 'Metadata3', data: 30, color: DefaultPalette.blueLight },
+      { legend: 'Metadata3', data: 30, color: getColorFromToken(DataVizPalette.color6) },
     ];
     const fifthChartPoints: IVSChartDataPoint[] = [
-      { legend: 'Metadata1', data: 40, color: DefaultPalette.blue },
+      { legend: 'Metadata1', data: 40, color: getColorFromToken(DataVizPalette.color11) },
       { legend: 'Metadata2', data: 40, color: DefaultPalette.blueMid },
-      { legend: 'Metadata3', data: 40, color: DefaultPalette.blueLight },
+      { legend: 'Metadata3', data: 40, color: getColorFromToken(DataVizPalette.color6) },
     ];
     const sixthChartPoints: IVSChartDataPoint[] = [
-      { legend: 'Metadata1', data: 40, color: DefaultPalette.blue },
+      { legend: 'Metadata1', data: 40, color: getColorFromToken(DataVizPalette.color11) },
       { legend: 'Metadata2', data: 20, color: DefaultPalette.blueMid },
-      { legend: 'Metadata3', data: 40, color: DefaultPalette.blueLight },
+      { legend: 'Metadata3', data: 40, color: getColorFromToken(DataVizPalette.color6) },
     ];
 
     const seventhChartPoints: IVSChartDataPoint[] = [
-      { legend: 'Metadata1', data: 10, color: DefaultPalette.blue },
+      { legend: 'Metadata1', data: 10, color: getColorFromToken(DataVizPalette.color11) },
       { legend: 'Metadata2', data: 80, color: DefaultPalette.blueMid },
-      { legend: 'Metadata3', data: 20, color: DefaultPalette.blueLight },
+      { legend: 'Metadata3', data: 20, color: getColorFromToken(DataVizPalette.color6) },
     ];
     const eightChartPoints: IVSChartDataPoint[] = [
-      { legend: 'Metadata1', data: 50, color: DefaultPalette.blue },
+      { legend: 'Metadata1', data: 50, color: getColorFromToken(DataVizPalette.color11) },
       { legend: 'Metadata2', data: 50, color: DefaultPalette.blueMid },
-      { legend: 'Metadata3', data: 20, color: DefaultPalette.blueLight },
+      { legend: 'Metadata3', data: 20, color: getColorFromToken(DataVizPalette.color6) },
     ];
 
     const data: IVerticalStackedChartProps[] = [
       {
         chartData: firstChartPoints,
         xAxisPoint: 'Jan',
-        ...(showLine && { lineData: [{ y: 40, color: DefaultPalette.yellowDark, legend: 'line1' }] }),
+        ...(showLine && { lineData: [{ y: 40, color: getColorFromToken(DataVizPalette.color10), legend: 'line1' }] }),
       },
       {
         chartData: secondChartPoints,
         xAxisPoint: 'Feb',
         ...(showLine && {
           lineData: [
-            { y: 15, color: DefaultPalette.yellowDark, legend: 'line1' },
+            { y: 15, color: getColorFromToken(DataVizPalette.color10), legend: 'line1' },
             { y: 70, color: DefaultPalette.magenta, legend: 'line3' },
           ],
         }),
@@ -134,7 +136,7 @@ export class VerticalStackedBarChartCalloutExample extends React.Component<{}, I
         xAxisPoint: 'April',
         ...(showLine && {
           lineData: [
-            { y: 40, color: DefaultPalette.yellowDark, legend: 'line1' },
+            { y: 40, color: getColorFromToken(DataVizPalette.color10), legend: 'line1' },
             { y: 50, color: DefaultPalette.greenDark, legend: 'line2' },
             { y: 65, color: DefaultPalette.magenta, legend: 'line3' },
           ],
@@ -145,7 +147,7 @@ export class VerticalStackedBarChartCalloutExample extends React.Component<{}, I
         xAxisPoint: 'May',
         ...(showLine && {
           lineData: [
-            { y: 20, color: DefaultPalette.yellowDark, legend: 'line1' },
+            { y: 20, color: getColorFromToken(DataVizPalette.color10), legend: 'line1' },
             { y: 65, color: DefaultPalette.greenDark, legend: 'line2' },
           ],
         }),
@@ -165,7 +167,7 @@ export class VerticalStackedBarChartCalloutExample extends React.Component<{}, I
         xAxisPoint: 'July',
         ...(showLine && {
           lineData: [
-            { y: 10, color: DefaultPalette.yellowDark, legend: 'line1' },
+            { y: 10, color: getColorFromToken(DataVizPalette.color10), legend: 'line1' },
             { y: 110, color: DefaultPalette.magenta, legend: 'line3' },
           ],
         }),
@@ -175,7 +177,7 @@ export class VerticalStackedBarChartCalloutExample extends React.Component<{}, I
         xAxisPoint: 'August',
         ...(showLine && {
           lineData: [
-            { y: 45, color: DefaultPalette.yellowDark, legend: 'line1' },
+            { y: 45, color: getColorFromToken(DataVizPalette.color10), legend: 'line1' },
             { y: 87, color: DefaultPalette.greenDark, legend: 'line2' },
           ],
         }),
@@ -185,7 +187,7 @@ export class VerticalStackedBarChartCalloutExample extends React.Component<{}, I
         xAxisPoint: 'September',
         ...(showLine && {
           lineData: [
-            { y: 15, color: DefaultPalette.yellowDark, legend: 'line1' },
+            { y: 15, color: getColorFromToken(DataVizPalette.color10), legend: 'line1' },
             { y: 60, color: DefaultPalette.magenta, legend: 'line3' },
           ],
         }),
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx
index 721df221482c6..5420008c9ada7 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx
@@ -4,6 +4,8 @@ import {
   IVerticalStackedChartProps,
   VerticalStackedBarChart,
   ILineChartLineOptions,
+  DataVizPalette,
+  getColorFromToken,
 } from '@fluentui/react-charting';
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
@@ -46,7 +48,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com
       {
         legend: 'Metadata1',
         data: 40,
-        color: DefaultPalette.blue,
+        color: getColorFromToken(DataVizPalette.color11),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '61%',
         callOutAccessibilityData: { ariaLabel: 'Bar series 1-1 of 4, 2020/04/30 Metadata1 61%' },
@@ -62,7 +64,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com
       {
         legend: 'Metadata3',
         data: 20,
-        color: DefaultPalette.blueLight,
+        color: getColorFromToken(DataVizPalette.color6),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '31%',
         callOutAccessibilityData: { ariaLabel: 'Bar series 1-3 of 4, 2020/04/30 Metadata3 31%' },
@@ -73,7 +75,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com
       {
         legend: 'Metadata1',
         data: 30,
-        color: DefaultPalette.blue,
+        color: getColorFromToken(DataVizPalette.color11),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '33%',
         callOutAccessibilityData: { ariaLabel: 'Bar series 2-1 of 4, 2020/04/30 Metadata1 33%' },
@@ -89,7 +91,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com
       {
         legend: 'Metadata3',
         data: 40,
-        color: DefaultPalette.blueLight,
+        color: getColorFromToken(DataVizPalette.color6),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '45%',
         callOutAccessibilityData: { ariaLabel: 'Bar series 2-3 of 4, 2020/04/30 Metadata3 45%' },
@@ -100,7 +102,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com
       {
         legend: 'Metadata1',
         data: 44,
-        color: DefaultPalette.blue,
+        color: getColorFromToken(DataVizPalette.color11),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '43%',
         callOutAccessibilityData: { ariaLabel: 'Bar series 3-1 of 4, 2020/04/30 Metadata1 43%' },
@@ -116,7 +118,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com
       {
         legend: 'Metadata3',
         data: 30,
-        color: DefaultPalette.blueLight,
+        color: getColorFromToken(DataVizPalette.color6),
         xAxisCalloutData: '2020/04/30',
         yAxisCalloutData: '30%',
         callOutAccessibilityData: { ariaLabel: 'Bar series 3-3 of 4, 2020/04/30 Metadata3 30%' },