diff --git a/change/@fluentui-react-charting-4f8e08b2-0b16-4f95-a37e-3c37c4bcb904.json b/change/@fluentui-react-charting-4f8e08b2-0b16-4f95-a37e-3c37c4bcb904.json
new file mode 100644
index 0000000000000..3cdca6b8bb3c1
--- /dev/null
+++ b/change/@fluentui-react-charting-4f8e08b2-0b16-4f95-a37e-3c37c4bcb904.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "set reference line legends after the main chart legends",
+  "packageName": "@fluentui/react-charting",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-charts-b9303617-253d-4830-bbb1-b4207ec9791a.json b/change/@fluentui-react-charts-b9303617-253d-4830-bbb1-b4207ec9791a.json
new file mode 100644
index 0000000000000..545d1febb16d6
--- /dev/null
+++ b/change/@fluentui-react-charts-b9303617-253d-4830-bbb1-b4207ec9791a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "set reference line legends after the main chart legends",
+  "packageName": "@fluentui/react-charts",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
index c1f4428895572..a58aacba2c91c 100644
--- a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
+++ b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -707,7 +707,7 @@ export class VerticalStackedBarChartBase
         legendsOfLine.push(legend);
       });
     }
-    const totalLegends: ILegend[] = legendsOfLine.concat(actions);
+    const totalLegends: ILegend[] = actions.concat(legendsOfLine);
     return (
       <Legends
         legends={totalLegends}
diff --git a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx
index b99d11103660e..7b359bf0bf891 100644
--- a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx
+++ b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx
@@ -413,7 +413,7 @@ describe('Vertical stacked bar chart - Subcomponent Legends', () => {
       const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect');
       const line = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'line');
       const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button');
-      fireEvent.mouseOver(legends[0]);
+      fireEvent.mouseOver(legends[3]);
       // Assert
       expect(line[8].getAttribute('opacity')).toEqual('1');
       expect(bars[0]).toHaveStyle('opacity: 0.1');
@@ -436,7 +436,7 @@ describe('Vertical stacked bar chart - Subcomponent Legends', () => {
       const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button');
       const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect');
       const line = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'line');
-      fireEvent.mouseOver(legends![1]);
+      fireEvent.mouseOver(legends![0]);
 
       // Assert
       expect(line[8].getAttribute('opacity')).toEqual('0.1');
diff --git a/packages/charts/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap b/packages/charts/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap
index d06bc8369943c..a4aa96cb56048 100644
--- a/packages/charts/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap
+++ b/packages/charts/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap
@@ -593,7 +593,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                     role="none"
                   >
                     <button
-                      aria-label="Supported Builds"
+                      aria-label="Metadata1"
                       aria-posinset="1"
                       aria-selected="false"
                       aria-setsize="4"
@@ -652,16 +652,16 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                         class=
 
                             {
-                              background-color: #e3008c;
-                              border-color: #e3008c;
+                              background-color: #0078d4;
+                              border-color: #0078d4;
                               border: 1px solid;
                               content: ;
-                              height: 4px;
+                              height: 12px;
                               margin-right: 8px;
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #e3008c, #e3008c);
+                              content: linear-gradient(to right, #0078d4, #0078d4);
                               opacity: ;
                             }
                       />
@@ -679,7 +679,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               opacity: ;
                             }
                       >
-                        Supported Builds
+                        Metadata1
                       </div>
                     </button>
                   </div>
@@ -693,7 +693,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                     role="none"
                   >
                     <button
-                      aria-label="Metadata1"
+                      aria-label="Metadata2"
                       aria-posinset="2"
                       aria-selected="false"
                       aria-setsize="4"
@@ -752,8 +752,8 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                         class=
 
                             {
-                              background-color: #0078d4;
-                              border-color: #0078d4;
+                              background-color: #00188f;
+                              border-color: #00188f;
                               border: 1px solid;
                               content: ;
                               height: 12px;
@@ -761,7 +761,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #0078d4, #0078d4);
+                              content: linear-gradient(to right, #00188f, #00188f);
                               opacity: ;
                             }
                       />
@@ -779,7 +779,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               opacity: ;
                             }
                       >
-                        Metadata1
+                        Metadata2
                       </div>
                     </button>
                   </div>
@@ -793,7 +793,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                     role="none"
                   >
                     <button
-                      aria-label="Metadata2"
+                      aria-label="Metadata3"
                       aria-posinset="3"
                       aria-selected="false"
                       aria-setsize="4"
@@ -852,8 +852,8 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                         class=
 
                             {
-                              background-color: #00188f;
-                              border-color: #00188f;
+                              background-color: #00bcf2;
+                              border-color: #00bcf2;
                               border: 1px solid;
                               content: ;
                               height: 12px;
@@ -861,7 +861,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #00188f, #00188f);
+                              content: linear-gradient(to right, #00bcf2, #00bcf2);
                               opacity: ;
                             }
                       />
@@ -879,7 +879,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               opacity: ;
                             }
                       >
-                        Metadata2
+                        Metadata3
                       </div>
                     </button>
                   </div>
@@ -893,7 +893,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                     role="none"
                   >
                     <button
-                      aria-label="Metadata3"
+                      aria-label="Supported Builds"
                       aria-posinset="4"
                       aria-selected="false"
                       aria-setsize="4"
@@ -952,16 +952,16 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                         class=
 
                             {
-                              background-color: #00bcf2;
-                              border-color: #00bcf2;
+                              background-color: #e3008c;
+                              border-color: #e3008c;
                               border: 1px solid;
                               content: ;
-                              height: 12px;
+                              height: 4px;
                               margin-right: 8px;
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #00bcf2, #00bcf2);
+                              content: linear-gradient(to right, #e3008c, #e3008c);
                               opacity: ;
                             }
                       />
@@ -979,7 +979,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               opacity: ;
                             }
                       >
-                        Metadata3
+                        Supported Builds
                       </div>
                     </button>
                   </div>
@@ -1587,7 +1587,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                     role="none"
                   >
                     <button
-                      aria-label="Supported Builds"
+                      aria-label="Metadata1"
                       aria-posinset="1"
                       aria-selected="false"
                       aria-setsize="4"
@@ -1646,16 +1646,16 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                         class=
 
                             {
-                              background-color: #e3008c;
-                              border-color: #e3008c;
+                              background-color: #0078d4;
+                              border-color: #0078d4;
                               border: 1px solid;
                               content: ;
-                              height: 4px;
+                              height: 12px;
                               margin-right: 8px;
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #e3008c, #e3008c);
+                              content: linear-gradient(to right, #0078d4, #0078d4);
                               opacity: ;
                             }
                       />
@@ -1673,7 +1673,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               opacity: ;
                             }
                       >
-                        Supported Builds
+                        Metadata1
                       </div>
                     </button>
                   </div>
@@ -1687,7 +1687,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                     role="none"
                   >
                     <button
-                      aria-label="Metadata1"
+                      aria-label="Metadata2"
                       aria-posinset="2"
                       aria-selected="false"
                       aria-setsize="4"
@@ -1746,8 +1746,8 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                         class=
 
                             {
-                              background-color: #0078d4;
-                              border-color: #0078d4;
+                              background-color: #00188f;
+                              border-color: #00188f;
                               border: 1px solid;
                               content: ;
                               height: 12px;
@@ -1755,7 +1755,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #0078d4, #0078d4);
+                              content: linear-gradient(to right, #00188f, #00188f);
                               opacity: ;
                             }
                       />
@@ -1773,7 +1773,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               opacity: ;
                             }
                       >
-                        Metadata1
+                        Metadata2
                       </div>
                     </button>
                   </div>
@@ -1787,7 +1787,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                     role="none"
                   >
                     <button
-                      aria-label="Metadata2"
+                      aria-label="Metadata3"
                       aria-posinset="3"
                       aria-selected="false"
                       aria-setsize="4"
@@ -1846,8 +1846,8 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                         class=
 
                             {
-                              background-color: #00188f;
-                              border-color: #00188f;
+                              background-color: #00bcf2;
+                              border-color: #00bcf2;
                               border: 1px solid;
                               content: ;
                               height: 12px;
@@ -1855,7 +1855,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #00188f, #00188f);
+                              content: linear-gradient(to right, #00bcf2, #00bcf2);
                               opacity: ;
                             }
                       />
@@ -1873,7 +1873,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               opacity: ;
                             }
                       >
-                        Metadata2
+                        Metadata3
                       </div>
                     </button>
                   </div>
@@ -1887,7 +1887,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                     role="none"
                   >
                     <button
-                      aria-label="Metadata3"
+                      aria-label="Supported Builds"
                       aria-posinset="4"
                       aria-selected="false"
                       aria-setsize="4"
@@ -1946,16 +1946,16 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                         class=
 
                             {
-                              background-color: #00bcf2;
-                              border-color: #00bcf2;
+                              background-color: #e3008c;
+                              border-color: #e3008c;
                               border: 1px solid;
                               content: ;
-                              height: 12px;
+                              height: 4px;
                               margin-right: 8px;
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #00bcf2, #00bcf2);
+                              content: linear-gradient(to right, #e3008c, #e3008c);
                               opacity: ;
                             }
                       />
@@ -1973,7 +1973,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                               opacity: ;
                             }
                       >
-                        Metadata3
+                        Supported Builds
                       </div>
                     </button>
                   </div>
@@ -2581,7 +2581,7 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                     role="none"
                   >
                     <button
-                      aria-label="Supported Builds"
+                      aria-label="Metadata1"
                       aria-posinset="1"
                       aria-selected="false"
                       aria-setsize="4"
@@ -2640,16 +2640,16 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                         class=
 
                             {
-                              background-color: #e3008c;
-                              border-color: #e3008c;
+                              background-color: #0078d4;
+                              border-color: #0078d4;
                               border: 1px solid;
                               content: ;
-                              height: 4px;
+                              height: 12px;
                               margin-right: 8px;
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #e3008c, #e3008c);
+                              content: linear-gradient(to right, #0078d4, #0078d4);
                               opacity: ;
                             }
                       />
@@ -2667,7 +2667,7 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                               opacity: ;
                             }
                       >
-                        Supported Builds
+                        Metadata1
                       </div>
                     </button>
                   </div>
@@ -2681,7 +2681,7 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                     role="none"
                   >
                     <button
-                      aria-label="Metadata1"
+                      aria-label="Metadata2"
                       aria-posinset="2"
                       aria-selected="false"
                       aria-setsize="4"
@@ -2740,8 +2740,8 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                         class=
 
                             {
-                              background-color: #0078d4;
-                              border-color: #0078d4;
+                              background-color: #00188f;
+                              border-color: #00188f;
                               border: 1px solid;
                               content: ;
                               height: 12px;
@@ -2749,7 +2749,7 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #0078d4, #0078d4);
+                              content: linear-gradient(to right, #00188f, #00188f);
                               opacity: ;
                             }
                       />
@@ -2767,7 +2767,7 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                               opacity: ;
                             }
                       >
-                        Metadata1
+                        Metadata2
                       </div>
                     </button>
                   </div>
@@ -2781,7 +2781,7 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                     role="none"
                   >
                     <button
-                      aria-label="Metadata2"
+                      aria-label="Metadata3"
                       aria-posinset="3"
                       aria-selected="false"
                       aria-setsize="4"
@@ -2840,8 +2840,8 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                         class=
 
                             {
-                              background-color: #00188f;
-                              border-color: #00188f;
+                              background-color: #00bcf2;
+                              border-color: #00bcf2;
                               border: 1px solid;
                               content: ;
                               height: 12px;
@@ -2849,7 +2849,7 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #00188f, #00188f);
+                              content: linear-gradient(to right, #00bcf2, #00bcf2);
                               opacity: ;
                             }
                       />
@@ -2867,7 +2867,7 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                               opacity: ;
                             }
                       >
-                        Metadata2
+                        Metadata3
                       </div>
                     </button>
                   </div>
@@ -2881,7 +2881,7 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                     role="none"
                   >
                     <button
-                      aria-label="Metadata3"
+                      aria-label="Supported Builds"
                       aria-posinset="4"
                       aria-selected="false"
                       aria-setsize="4"
@@ -2940,16 +2940,16 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                         class=
 
                             {
-                              background-color: #00bcf2;
-                              border-color: #00bcf2;
+                              background-color: #e3008c;
+                              border-color: #e3008c;
                               border: 1px solid;
                               content: ;
-                              height: 12px;
+                              height: 4px;
                               margin-right: 8px;
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #00bcf2, #00bcf2);
+                              content: linear-gradient(to right, #e3008c, #e3008c);
                               opacity: ;
                             }
                       />
@@ -2967,7 +2967,7 @@ exports[`Vertical stacked bar chart - Subcomponent Line Should render the vertic
                               opacity: ;
                             }
                       >
-                        Metadata3
+                        Supported Builds
                       </div>
                     </button>
                   </div>
@@ -10372,7 +10372,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                     role="none"
                   >
                     <button
-                      aria-label="Supported Builds"
+                      aria-label="Metadata1"
                       aria-posinset="1"
                       aria-selected="false"
                       aria-setsize="4"
@@ -10431,16 +10431,16 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                         class=
 
                             {
-                              background-color: #e3008c;
-                              border-color: #e3008c;
+                              background-color: #0078d4;
+                              border-color: #0078d4;
                               border: 1px solid;
                               content: ;
-                              height: 4px;
+                              height: 12px;
                               margin-right: 8px;
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #e3008c, #e3008c);
+                              content: linear-gradient(to right, #0078d4, #0078d4);
                               opacity: ;
                             }
                       />
@@ -10458,7 +10458,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                               opacity: ;
                             }
                       >
-                        Supported Builds
+                        Metadata1
                       </div>
                     </button>
                   </div>
@@ -10472,7 +10472,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                     role="none"
                   >
                     <button
-                      aria-label="Metadata1"
+                      aria-label="Metadata2"
                       aria-posinset="2"
                       aria-selected="false"
                       aria-setsize="4"
@@ -10531,8 +10531,8 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                         class=
 
                             {
-                              background-color: #0078d4;
-                              border-color: #0078d4;
+                              background-color: #00188f;
+                              border-color: #00188f;
                               border: 1px solid;
                               content: ;
                               height: 12px;
@@ -10540,7 +10540,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #0078d4, #0078d4);
+                              content: linear-gradient(to right, #00188f, #00188f);
                               opacity: ;
                             }
                       />
@@ -10558,7 +10558,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                               opacity: ;
                             }
                       >
-                        Metadata1
+                        Metadata2
                       </div>
                     </button>
                   </div>
@@ -10572,7 +10572,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                     role="none"
                   >
                     <button
-                      aria-label="Metadata2"
+                      aria-label="Metadata3"
                       aria-posinset="3"
                       aria-selected="false"
                       aria-setsize="4"
@@ -10631,8 +10631,8 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                         class=
 
                             {
-                              background-color: #00188f;
-                              border-color: #00188f;
+                              background-color: #00bcf2;
+                              border-color: #00bcf2;
                               border: 1px solid;
                               content: ;
                               height: 12px;
@@ -10640,7 +10640,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #00188f, #00188f);
+                              content: linear-gradient(to right, #00bcf2, #00bcf2);
                               opacity: ;
                             }
                       />
@@ -10658,7 +10658,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                               opacity: ;
                             }
                       >
-                        Metadata2
+                        Metadata3
                       </div>
                     </button>
                   </div>
@@ -10672,7 +10672,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                     role="none"
                   >
                     <button
-                      aria-label="Metadata3"
+                      aria-label="Supported Builds"
                       aria-posinset="4"
                       aria-selected="false"
                       aria-setsize="4"
@@ -10731,16 +10731,16 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                         class=
 
                             {
-                              background-color: #00bcf2;
-                              border-color: #00bcf2;
+                              background-color: #e3008c;
+                              border-color: #e3008c;
                               border: 1px solid;
                               content: ;
-                              height: 12px;
+                              height: 4px;
                               margin-right: 8px;
                               width: 12px;
                             }
                             @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #00bcf2, #00bcf2);
+                              content: linear-gradient(to right, #e3008c, #e3008c);
                               opacity: ;
                             }
                       />
@@ -10758,7 +10758,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                               opacity: ;
                             }
                       >
-                        Metadata3
+                        Supported Builds
                       </div>
                     </button>
                   </div>
diff --git a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
index 8dd5591f113eb..c593ffcb5287c 100644
--- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
@@ -392,7 +392,7 @@ describe('Vertical stacked bar chart - Subcomponent Legends', () => {
       const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect');
       const line = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'line');
       const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button');
-      fireEvent.mouseOver(legends[0]);
+      fireEvent.mouseOver(legends[3]);
       // Assert
       expect(line[8].getAttribute('opacity')).toEqual('1');
       expect(bars[0]).toHaveAttribute('opacity', '0.1');
@@ -415,7 +415,7 @@ describe('Vertical stacked bar chart - Subcomponent Legends', () => {
       const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button');
       const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect');
       const line = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'line');
-      fireEvent.mouseOver(legends![1]);
+      fireEvent.mouseOver(legends![0]);
 
       // Assert
       expect(line[8].getAttribute('opacity')).toEqual('0.1');
diff --git a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
index a77868c7d068f..2a68ee72c93c5 100644
--- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
@@ -224,7 +224,7 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
         legendsOfLine.push(legend);
       });
     }
-    const totalLegends: Legend[] = legendsOfLine.concat(actions);
+    const totalLegends: Legend[] = actions.concat(legendsOfLine);
     return (
       <Legends
         legends={totalLegends}
diff --git a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
index 0734251123cb0..03f972bc22ca4 100644
--- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
+++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
@@ -432,79 +432,79 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
           style="text-align: unset;"
         >
           <button
-            aria-label="Supported Builds"
+            aria-label="Metadata1"
             aria-selected="false"
             class="fui-Button fui-legend__legend"
             data-overflow-item=""
             role="option"
-            style="--rect-height: 4px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
+            style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
             type="button"
           >
             <div
               class="fui-legend__rect"
-              style="height: 4px; background-color: rgb(0, 120, 212); border-color: #0078d4; --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
+              style="height: 12px; background-color: rgb(0, 120, 212); border-color: #0078d4; --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
             />
             <div
               class="fui-legend__text"
             >
-              Supported Builds
+              Metadata1
             </div>
           </button>
           <button
-            aria-label="Metadata1"
+            aria-label="Metadata2"
             aria-selected="false"
             class="fui-Button fui-legend__legend"
             data-overflow-item=""
             role="option"
-            style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
+            style="--rect-height: 12px; --rect-backgroundColor: #002050; --rect-borderColor: #002050;"
             type="button"
           >
             <div
               class="fui-legend__rect"
-              style="height: 12px; background-color: rgb(0, 120, 212); border-color: #0078d4; --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
+              style="height: 12px; background-color: rgb(0, 32, 80); border-color: #002050; --rect-content-high-contrast: linear-gradient(to right, #002050, #002050);"
             />
             <div
               class="fui-legend__text"
             >
-              Metadata1
+              Metadata2
             </div>
           </button>
           <button
-            aria-label="Metadata2"
+            aria-label="Metadata3"
             aria-selected="false"
             class="fui-Button fui-legend__legend"
             data-overflow-item=""
             role="option"
-            style="--rect-height: 12px; --rect-backgroundColor: #002050; --rect-borderColor: #002050;"
+            style="--rect-height: 12px; --rect-backgroundColor: #00188f; --rect-borderColor: #00188f;"
             type="button"
           >
             <div
               class="fui-legend__rect"
-              style="height: 12px; background-color: rgb(0, 32, 80); border-color: #002050; --rect-content-high-contrast: linear-gradient(to right, #002050, #002050);"
+              style="height: 12px; background-color: rgb(0, 24, 143); border-color: #00188f; --rect-content-high-contrast: linear-gradient(to right, #00188f, #00188f);"
             />
             <div
               class="fui-legend__text"
             >
-              Metadata2
+              Metadata3
             </div>
           </button>
           <button
-            aria-label="Metadata3"
+            aria-label="Supported Builds"
             aria-selected="false"
             class="fui-Button fui-legend__legend"
             data-overflow-item=""
             role="option"
-            style="--rect-height: 12px; --rect-backgroundColor: #00188f; --rect-borderColor: #00188f;"
+            style="--rect-height: 4px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
             type="button"
           >
             <div
               class="fui-legend__rect"
-              style="height: 12px; background-color: rgb(0, 24, 143); border-color: #00188f; --rect-content-high-contrast: linear-gradient(to right, #00188f, #00188f);"
+              style="height: 4px; background-color: rgb(0, 120, 212); border-color: #0078d4; --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
             />
             <div
               class="fui-legend__text"
             >
-              Metadata3
+              Supported Builds
             </div>
           </button>
         </div>
@@ -946,79 +946,79 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
           style="text-align: unset;"
         >
           <button
-            aria-label="Supported Builds"
+            aria-label="Metadata1"
             aria-selected="false"
             class="fui-Button fui-legend__legend"
             data-overflow-item=""
             role="option"
-            style="--rect-height: 4px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
+            style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
             type="button"
           >
             <div
               class="fui-legend__rect"
-              style="height: 4px; background-color: rgb(0, 120, 212); border-color: #0078d4; --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
+              style="height: 12px; background-color: rgb(0, 120, 212); border-color: #0078d4; --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
             />
             <div
               class="fui-legend__text"
             >
-              Supported Builds
+              Metadata1
             </div>
           </button>
           <button
-            aria-label="Metadata1"
+            aria-label="Metadata2"
             aria-selected="false"
             class="fui-Button fui-legend__legend"
             data-overflow-item=""
             role="option"
-            style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
+            style="--rect-height: 12px; --rect-backgroundColor: #002050; --rect-borderColor: #002050;"
             type="button"
           >
             <div
               class="fui-legend__rect"
-              style="height: 12px; background-color: rgb(0, 120, 212); border-color: #0078d4; --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
+              style="height: 12px; background-color: rgb(0, 32, 80); border-color: #002050; --rect-content-high-contrast: linear-gradient(to right, #002050, #002050);"
             />
             <div
               class="fui-legend__text"
             >
-              Metadata1
+              Metadata2
             </div>
           </button>
           <button
-            aria-label="Metadata2"
+            aria-label="Metadata3"
             aria-selected="false"
             class="fui-Button fui-legend__legend"
             data-overflow-item=""
             role="option"
-            style="--rect-height: 12px; --rect-backgroundColor: #002050; --rect-borderColor: #002050;"
+            style="--rect-height: 12px; --rect-backgroundColor: #00188f; --rect-borderColor: #00188f;"
             type="button"
           >
             <div
               class="fui-legend__rect"
-              style="height: 12px; background-color: rgb(0, 32, 80); border-color: #002050; --rect-content-high-contrast: linear-gradient(to right, #002050, #002050);"
+              style="height: 12px; background-color: rgb(0, 24, 143); border-color: #00188f; --rect-content-high-contrast: linear-gradient(to right, #00188f, #00188f);"
             />
             <div
               class="fui-legend__text"
             >
-              Metadata2
+              Metadata3
             </div>
           </button>
           <button
-            aria-label="Metadata3"
+            aria-label="Supported Builds"
             aria-selected="false"
             class="fui-Button fui-legend__legend"
             data-overflow-item=""
             role="option"
-            style="--rect-height: 12px; --rect-backgroundColor: #00188f; --rect-borderColor: #00188f;"
+            style="--rect-height: 4px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
             type="button"
           >
             <div
               class="fui-legend__rect"
-              style="height: 12px; background-color: rgb(0, 24, 143); border-color: #00188f; --rect-content-high-contrast: linear-gradient(to right, #00188f, #00188f);"
+              style="height: 4px; background-color: rgb(0, 120, 212); border-color: #0078d4; --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
             />
             <div
               class="fui-legend__text"
             >
-              Metadata3
+              Supported Builds
             </div>
           </button>
         </div>
@@ -3145,21 +3145,21 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             class="fui-legend__legendContainer"
           >
             <button
-              aria-label="Line1"
+              aria-label="Metadata1"
               aria-selected="false"
               class="fui-Button fui-legend__legend"
               role="option"
-              style="--rect-height: 4px; --rect-backgroundColor: yellow; --rect-borderColor: yellow;"
+              style="--rect-height: 12px; --rect-backgroundColor: aqua; --rect-borderColor: aqua;"
               type="button"
             >
               <div
                 class="fui-legend__rect"
-                style="height: 4px; background-color: yellow; border-color: yellow; --rect-content-high-contrast: linear-gradient(to right, yellow, yellow);"
+                style="height: 12px; background-color: aqua; border-color: aqua; --rect-content-high-contrast: linear-gradient(to right, aqua, aqua);"
               />
               <div
                 class="fui-legend__text"
               >
-                Line1
+                Metadata1
               </div>
             </button>
           </div>
@@ -3167,21 +3167,21 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             class="fui-legend__legendContainer"
           >
             <button
-              aria-label="Metadata1"
+              aria-label="Metadata2"
               aria-selected="false"
               class="fui-Button fui-legend__legend"
               role="option"
-              style="--rect-height: 12px; --rect-backgroundColor: aqua; --rect-borderColor: aqua;"
+              style="--rect-height: 12px; --rect-backgroundColor: navy; --rect-borderColor: navy;"
               type="button"
             >
               <div
                 class="fui-legend__rect"
-                style="height: 12px; background-color: aqua; border-color: aqua; --rect-content-high-contrast: linear-gradient(to right, aqua, aqua);"
+                style="height: 12px; background-color: navy; border-color: navy; --rect-content-high-contrast: linear-gradient(to right, navy, navy);"
               />
               <div
                 class="fui-legend__text"
               >
-                Metadata1
+                Metadata2
               </div>
             </button>
           </div>
@@ -3189,21 +3189,21 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             class="fui-legend__legendContainer"
           >
             <button
-              aria-label="Metadata2"
+              aria-label="Line1"
               aria-selected="false"
               class="fui-Button fui-legend__legend"
               role="option"
-              style="--rect-height: 12px; --rect-backgroundColor: navy; --rect-borderColor: navy;"
+              style="--rect-height: 4px; --rect-backgroundColor: yellow; --rect-borderColor: yellow;"
               type="button"
             >
               <div
                 class="fui-legend__rect"
-                style="height: 12px; background-color: navy; border-color: navy; --rect-content-high-contrast: linear-gradient(to right, navy, navy);"
+                style="height: 4px; background-color: yellow; border-color: yellow; --rect-content-high-contrast: linear-gradient(to right, yellow, yellow);"
               />
               <div
                 class="fui-legend__text"
               >
-                Metadata2
+                Line1
               </div>
             </button>
           </div>