From 9b5a84d73a4b429dffc6d4da9dbf629e805e6e16 Mon Sep 17 00:00:00 2001
From: Anush <anushgupta@microsoft.com>
Date: Wed, 12 Nov 2025 10:52:06 +0530
Subject: [PATCH 1/3] fix legend order

---
 .../VerticalStackedBarChart/VerticalStackedBarChart.base.tsx    | 2 +-
 .../VerticalStackedBarChart/VerticalStackedBarChart.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 c1f4428895572c..a58aacba2c91c6 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-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
index a77868c7d068f1..2a68ee72c93c55 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}

From dac955707eb2c351fe4b855737345ede275118b9 Mon Sep 17 00:00:00 2001
From: Anush <anushgupta@microsoft.com>
Date: Wed, 12 Nov 2025 10:55:41 +0530
Subject: [PATCH 2/3] Add change file

---
 ...eact-charting-4f8e08b2-0b16-4f95-a37e-3c37c4bcb904.json | 7 +++++++
 ...-react-charts-b9303617-253d-4830-bbb1-b4207ec9791a.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-charting-4f8e08b2-0b16-4f95-a37e-3c37c4bcb904.json
 create mode 100644 change/@fluentui-react-charts-b9303617-253d-4830-bbb1-b4207ec9791a.json

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 00000000000000..3cdca6b8bb3c1b
--- /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 00000000000000..545d1febb16d6a
--- /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"
+}

From 7c33c039aa24167de925748c7ca101f9ac7e7fd1 Mon Sep 17 00:00:00 2001
From: Anush <anushgupta@microsoft.com>
Date: Wed, 12 Nov 2025 12:30:54 +0530
Subject: [PATCH 3/3] fix tests and update snapshots

---
 .../VerticalStackedBarChartRTL.test.tsx       |   4 +-
 .../VerticalStackedBarChartRTL.test.tsx.snap  | 176 +++++++++---------
 .../VerticalStackedBarChart.test.tsx          |   4 +-
 .../VerticalStackedBarChart.test.tsx.snap     |  88 ++++-----
 4 files changed, 136 insertions(+), 136 deletions(-)

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 b99d11103660ee..7b359bf0bf8912 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 d06bc8369943cc..a4aa96cb56048e 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 8dd5591f113eb3..c593ffcb5287c9 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/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
index 0734251123cb0e..03f972bc22ca45 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>