diff --git a/pages/03-core/core-dual-axis-chart.page.tsx b/pages/03-core/core-dual-axis-chart.page.tsx
new file mode 100644
index 00000000..4143ea95
--- /dev/null
+++ b/pages/03-core/core-dual-axis-chart.page.tsx
@@ -0,0 +1,186 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { omit } from "lodash";
+
+import Link from "@cloudscape-design/components/link";
+
+import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
+import { dateFormatter } from "../common/formatters";
+import { PageSettingsForm, useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+import pseudoRandom from "../utils/pseudo-random";
+
+function randomInt(min: number, max: number) {
+  return min + Math.floor(pseudoRandom() * (max - min));
+}
+
+const colors = [
+  "#F15C80",
+  "#2B908F",
+  "#F45B5B",
+  "#91E8E1",
+  "#8085E9",
+  "#E4D354",
+  "#8D4654",
+  "#7798BF",
+  "#AAEEEE",
+  "#FF9655",
+];
+
+const baseline = [
+  { x: 1600984800000, y: 58020 },
+  { x: 1600985700000, y: 102402 },
+  { x: 1600986600000, y: 104920 },
+  { x: 1600987500000, y: 94031 },
+  { x: 1600988400000, y: 125021 },
+  { x: 1600989300000, y: 159219 },
+  { x: 1600990200000, y: 193082 },
+  { x: 1600991100000, y: 162592 },
+  { x: 1600992000000, y: 274021 },
+  { x: 1600992900000, y: 264286 },
+  { x: 1600993800000, y: 289210 },
+  { x: 1600994700000, y: 256362 },
+  { x: 1600995600000, y: 257306 },
+  { x: 1600996500000, y: 186776 },
+  { x: 1600997400000, y: 294020 },
+  { x: 1600998300000, y: 385975 },
+  { x: 1600999200000, y: 486039 },
+  { x: 1601000100000, y: 490447 },
+  { x: 1601001000000, y: 361845 },
+  { x: 1601001900000, y: 339058 },
+  { x: 1601002800000, y: 298028 },
+  { x: 1601003400000, y: 255555 },
+  { x: 1601003700000, y: 231902 },
+  { x: 1601004600000, y: 224558 },
+  { x: 1601005500000, y: 253901 },
+  { x: 1601006400000, y: 102839 },
+  { x: 1601007300000, y: 234943 },
+  { x: 1601008200000, y: 204405 },
+  { x: 1601009100000, y: 190391 },
+  { x: 1601010000000, y: 183570 },
+  { x: 1601010900000, y: 162592 },
+  { x: 1601011800000, y: 148910 },
+];
+
+const generatePrimaryAxisData = (letter: string, index: number) => {
+  return baseline.map(({ x, y }) => ({
+    name: `Events ${letter}`,
+    x,
+    y: y === null ? null : y + randomInt(-100000 * ((index % 3) + 1), 100000 * ((index % 3) + 1)),
+  }));
+};
+
+const generateSecondaryAxisData = (letter: string, index: number) => {
+  return baseline.map(({ x, y }) => ({
+    name: `Percentage ${letter}`,
+    x,
+    y: y === null ? null : (y / 10000) * randomInt(3 + (index % 5), 10 + (index % 10)),
+  }));
+};
+
+const primarySeriesData: Record<string, ReturnType<typeof generatePrimaryAxisData>> = {};
+for (let i = 0; i < 10; i++) {
+  const letter = String.fromCharCode(65 + i);
+  primarySeriesData[`data${letter}`] = generatePrimaryAxisData(letter, i);
+}
+
+const secondarySeriesData: Record<string, ReturnType<typeof generatePrimaryAxisData>> = {};
+for (let i = 0; i < 10; i++) {
+  const letter = String.fromCharCode(65 + i);
+  secondarySeriesData[`data${letter}`] = generateSecondaryAxisData(letter, i);
+}
+
+const series: Highcharts.SeriesOptionsType[] = [
+  ...Object.values(primarySeriesData),
+  ...Object.values(secondarySeriesData),
+].map((data, index) => {
+  const name = data[0].name;
+  const isPercentage = name.startsWith("Percentage");
+  return {
+    name,
+    type: "line",
+    data: data,
+    yAxis: isPercentage ? 1 : 0,
+    color: colors[index % colors.length],
+    dashStyle: isPercentage ? "Dash" : "Solid",
+  };
+});
+
+export default function () {
+  const { chartProps } = useChartSettings();
+  return (
+    <Page
+      title="Core dual-axis chart demo"
+      subtitle="This page demonstrates the use of the core chart with two Y axes for displaying data with different scales."
+      settings={
+        <PageSettingsForm
+          selectedSettings={[
+            "showLegend",
+            "legendPosition",
+            "legendBottomMaxHeight",
+            "showLegendTitle",
+            "showLegendActions",
+          ]}
+        />
+      }
+    >
+      <CoreChart
+        {...omit(chartProps.cartesian, "ref")}
+        chartHeight={400}
+        ariaLabel="Dual axis line chart"
+        tooltip={{ placement: "outside" }}
+        options={{
+          series: series,
+          xAxis: [
+            {
+              type: "datetime",
+              title: { text: "Time (UTC)" },
+              valueFormatter: dateFormatter,
+            },
+          ],
+          yAxis: [
+            {
+              title: { text: "Events" },
+            },
+            {
+              opposite: true,
+              title: { text: "Percentage (%)" },
+            },
+          ],
+        }}
+        getLegendTooltipContent={({ legendItem }) => ({
+          header: (
+            <div style={{ display: "flex" }}>
+              {legendItem.marker}
+              {legendItem.name}
+            </div>
+          ),
+          body: (
+            <table>
+              <tbody style={{ textAlign: "left" }}>
+                <tr>
+                  <th scope="row">Period</th>
+                  <td>15 min</td>
+                </tr>
+                <tr>
+                  <th scope="row">Statistic</th>
+                  <td>Average</td>
+                </tr>
+                <tr>
+                  <th scope="row">Unit</th>
+                  <td>Count</td>
+                </tr>
+              </tbody>
+            </table>
+          ),
+          footer: (
+            <Link external={true} href="https://example.com/" variant="primary">
+              Learn more
+            </Link>
+          ),
+        })}
+      />
+    </Page>
+  );
+}
diff --git a/pages/common/page-settings.tsx b/pages/common/page-settings.tsx
index 9c575b92..c53d4f62 100644
--- a/pages/common/page-settings.tsx
+++ b/pages/common/page-settings.tsx
@@ -150,7 +150,9 @@ export function useChartSettings<SettingsType extends PageSettings = PageSetting
   const legend = {
     enabled: settings.showLegend,
     title: settings.showLegendTitle ? "Legend title" : undefined,
+    secondaryLegendTitle: settings.showLegendTitle ? "Secondary Legend title" : undefined,
     actions: settings.showLegendActions ? <Button variant="icon" iconName="search" /> : undefined,
+    secondaryLegendActions: settings.showLegendActions ? <Button variant="icon" iconName="calendar" /> : undefined,
     position: settings.legendPosition,
     bottomMaxHeight: settings.legendBottomMaxHeight,
     horizontalAlignment: settings.legendHorizontalAlign,
diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
index 580b86a9..d7622679 100644
--- a/src/__tests__/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/__snapshots__/documenter.test.ts.snap
@@ -1202,6 +1202,11 @@ exports[`internal core API matches snapshot > internal-core-chart 1`] = `
                     "optional": false,
                     "type": "string",
                   },
+                  {
+                    "name": "isSecondary",
+                    "optional": true,
+                    "type": "boolean",
+                  },
                   {
                     "name": "marker",
                     "optional": true,
@@ -1538,18 +1543,19 @@ Supported Highcharts versions: 12.",
         "description": "An object that contains all of the localized strings required by the component.",
         "i18nTag": true,
         "inlineType": {
-          "name": "CartesianI18nStrings & PieI18nStrings",
+          "name": "CartesianI18nStrings & PieI18nStrings & CoreI18nStrings",
           "type": "union",
           "valueDescriptions": undefined,
           "values": [
             "CartesianI18nStrings",
             "PieI18nStrings",
+            "CoreI18nStrings",
           ],
         },
         "name": "i18nStrings",
         "optional": true,
         "systemTags": undefined,
-        "type": "CartesianI18nStrings & PieI18nStrings",
+        "type": "CartesianI18nStrings & PieI18nStrings & CoreI18nStrings",
         "visualRefreshTag": undefined,
       },
       {
@@ -1617,6 +1623,16 @@ Supported Highcharts versions: 12.",
               "optional": true,
               "type": "string",
             },
+            {
+              "name": "secondaryLegendActions",
+              "optional": true,
+              "type": "React.ReactNode",
+            },
+            {
+              "name": "secondaryLegendTitle",
+              "optional": true,
+              "type": "string",
+            },
             {
               "name": "title",
               "optional": true,
diff --git a/src/core/__tests__/chart-core-legend.test.tsx b/src/core/__tests__/chart-core-legend.test.tsx
index 0cb63b7d..3b19b172 100644
--- a/src/core/__tests__/chart-core-legend.test.tsx
+++ b/src/core/__tests__/chart-core-legend.test.tsx
@@ -7,7 +7,15 @@ import { vi } from "vitest";
 
 import { KeyCode } from "@cloudscape-design/component-toolkit/internal";
 
-import { createChartWrapper, hoverLegendItem, renderChart } from "./common";
+import {
+  createChartWrapper,
+  hoverLegendItem,
+  hoverSecondaryLegendItem,
+  renderChart,
+  renderStatefulChart,
+  selectSecondaryLegendItem,
+  toggleSecondaryLegendItem,
+} from "./common";
 import { HighchartsTestHelper } from "./highcharts-utils";
 
 import legendTestClasses from "../../../lib/components/internal/components/chart-legend/test-classes/styles.selectors.js";
@@ -43,6 +51,21 @@ const series: Highcharts.SeriesOptionsType[] = [
   },
 ];
 
+const yAxes: Highcharts.YAxisOptions[] = [
+  { id: "primary", opposite: false },
+  { id: "secondary", opposite: true },
+];
+
+const primarySeries: Highcharts.SeriesOptionsType[] = [
+  { type: "line", name: "Primary 1", data: [1, 2, 3], yAxis: 0 },
+  { type: "line", name: "Primary 2", data: [2, 3, 4], yAxis: 0 },
+];
+
+const secondarySeries: Highcharts.SeriesOptionsType[] = [
+  { type: "line", name: "Secondary 1", data: [10, 20, 30], yAxis: 1 },
+  { type: "line", name: "Secondary 2", data: [15, 25, 35], yAxis: 1 },
+];
+
 const getItemSelector = (options?: { active?: boolean; dimmed?: boolean }) => {
   let selector = `.${legendTestClasses.item}`;
   if (options?.active === true) {
@@ -474,3 +497,123 @@ describe("CoreChart: legend", () => {
     );
   });
 });
+
+describe("CoreChart: secondary legend", () => {
+  test("does not render when no secondary axis series exist", () => {
+    renderChart({ highcharts, options: { series: primarySeries, yAxis: yAxes } });
+    expect(createChartWrapper().findSecondaryLegend()).toBe(null);
+  });
+
+  test("renders when only secondary axis series exist", () => {
+    renderChart({ highcharts, options: { series: secondarySeries, yAxis: yAxes } });
+    expect(createChartWrapper().findSecondaryLegend()).not.toBe(null);
+  });
+
+  test("renders when both primary and secondary axis series exist", () => {
+    renderChart({ highcharts, options: { series: [...primarySeries, ...secondarySeries], yAxis: yAxes } });
+    expect(createChartWrapper().findSecondaryLegend()).not.toBe(null);
+  });
+
+  test("renders no secondary legend when legend.enabled=false", () => {
+    renderChart({
+      highcharts,
+      legend: { enabled: false },
+      options: { series: [...primarySeries, ...secondarySeries], yAxis: yAxes },
+    });
+    expect(createChartWrapper().findSecondaryLegend()).toBe(null);
+  });
+
+  test("renders expected secondary legend items", () => {
+    renderChart({
+      highcharts,
+      visibleItems: ["Secondary 1", "Secondary 2"],
+      options: { series: [...primarySeries, ...secondarySeries], yAxis: yAxes },
+    });
+
+    const items = createChartWrapper().findSecondaryLegend()!.findItems();
+    expect(items.map((w) => w.getElement().textContent)).toEqual(["Secondary 1", "Secondary 2"]);
+  });
+
+  test("renders secondary legend title if specified", () => {
+    renderChart({
+      highcharts,
+      legend: { secondaryLegendTitle: "Secondary Legend" },
+      options: { series: [...primarySeries, ...secondarySeries], yAxis: yAxes },
+    });
+
+    expect(createChartWrapper().findSecondaryLegend()!.findTitle()!.getElement().textContent).toBe("Secondary Legend");
+  });
+
+  test("renders secondary legend actions if specified", () => {
+    renderChart({
+      highcharts,
+      legend: { secondaryLegendActions: "Secondary Actions" },
+      options: { series: [...primarySeries, ...secondarySeries], yAxis: yAxes },
+    });
+
+    expect(createChartWrapper().findSecondaryLegend()!.findActions()!.getElement().textContent).toBe(
+      "Secondary Actions",
+    );
+  });
+
+  describe("Event handlers", () => {
+    test("calls onLegendItemHighlight when hovering secondary legend item", () => {
+      const onLegendItemHighlight = vi.fn();
+      renderChart({
+        highcharts,
+        options: { series: [...primarySeries, ...secondarySeries], yAxis: yAxes },
+        onLegendItemHighlight,
+      });
+
+      act(() => hoverSecondaryLegendItem(0));
+
+      expect(onLegendItemHighlight).toHaveBeenCalledWith(
+        expect.objectContaining({
+          detail: {
+            item: expect.objectContaining({
+              id: "Secondary 1",
+              name: "Secondary 1",
+            }),
+          },
+        }),
+      );
+    });
+
+    test("triggers visibility change when clicking secondary legend item", () => {
+      const onVisibleItemsChange = vi.fn();
+      renderStatefulChart({
+        highcharts,
+        options: { series: [...primarySeries, ...secondarySeries], yAxis: yAxes },
+        visibleItems: ["Primary 1", "Primary 2", "Secondary 1", "Secondary 2"],
+        onVisibleItemsChange,
+      });
+
+      selectSecondaryLegendItem(0);
+
+      expect(onVisibleItemsChange).toHaveBeenCalled();
+      const call = onVisibleItemsChange.mock.calls[0][0];
+      const secondary1 = call.detail.items.find((item: any) => item.id === "Secondary 1");
+      const secondary2 = call.detail.items.find((item: any) => item.id === "Secondary 2");
+      expect(secondary1.visible).toBe(true);
+      expect(secondary2.visible).toBe(false);
+    });
+
+    test("triggers visibility change when toggling secondary legend item", () => {
+      const onVisibleItemsChange = vi.fn();
+      renderStatefulChart({
+        highcharts,
+        options: { series: [...primarySeries, ...secondarySeries], yAxis: yAxes },
+        visibleItems: ["Primary 1", "Primary 2", "Secondary 1", "Secondary 2"],
+        onVisibleItemsChange,
+      });
+
+      toggleSecondaryLegendItem(0);
+
+      expect(onVisibleItemsChange).toHaveBeenCalled();
+      const call = onVisibleItemsChange.mock.calls[0][0];
+      const secondaryItem = call.detail.items.find((item: any) => item.id === "Secondary 1");
+      expect(secondaryItem).toBeDefined();
+      expect(secondaryItem.visible).toBe(false);
+    });
+  });
+});
diff --git a/src/core/__tests__/chart-core-series-filter.test.tsx b/src/core/__tests__/chart-core-series-filter.test.tsx
index b59ceac8..95421bd5 100644
--- a/src/core/__tests__/chart-core-series-filter.test.tsx
+++ b/src/core/__tests__/chart-core-series-filter.test.tsx
@@ -63,8 +63,8 @@ describe("CoreChart: series filter", () => {
       expect.objectContaining({
         detail: {
           items: [
-            { id: "L1", name: "L1", marker: expect.anything(), visible: false, highlighted: false },
-            { id: "L2", name: "L2", marker: expect.anything(), visible: true, highlighted: false },
+            { id: "L1", name: "L1", marker: expect.anything(), visible: false, highlighted: false, isSecondary: false },
+            { id: "L2", name: "L2", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
           ],
           isApiCall: false,
         },
diff --git a/src/core/__tests__/chart-core-utils.test.tsx b/src/core/__tests__/chart-core-utils.test.tsx
index 415e2331..4f90854f 100644
--- a/src/core/__tests__/chart-core-utils.test.tsx
+++ b/src/core/__tests__/chart-core-utils.test.tsx
@@ -1,7 +1,19 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { getPointColor, getSeriesColor, getSeriesMarkerType } from "../../../lib/components/core/utils";
+import highcharts from "highcharts";
+
+import "highcharts/highcharts-more";
+import "highcharts/modules/solid-gauge";
+import { CoreChartProps } from "../../../lib/components/core/interfaces";
+import {
+  getChartLegendItems,
+  getLegendsProps,
+  getPointColor,
+  getSeriesColor,
+  getSeriesMarkerType,
+} from "../../../lib/components/core/utils";
+import { renderChart } from "./common";
 
 describe("CoreChart: utils", () => {
   test.each([
@@ -39,4 +51,208 @@ describe("CoreChart: utils", () => {
       expect(method({ color: 12345 })).toBe("black");
     },
   );
+
+  describe("getChartLegendItems", () => {
+    describe.each([{ inverted: true }, { inverted: false }])("charts, chartOptions = %s", (chartOptions) => {
+      const axisKey = chartOptions.inverted ? "xAxis" : "yAxis";
+      const oppositeAxisKey = chartOptions.inverted ? "yAxis" : "xAxis";
+
+      test.each([{ opposite: true }, { opposite: false }])(
+        "axisOptions = %s, sets isSecondary for series on default axis",
+        (axisOptions) => {
+          let chartApi: CoreChartProps.ChartAPI | null = null;
+          renderChart({
+            highcharts,
+            options: {
+              chart: chartOptions,
+              [axisKey]: axisOptions,
+              [oppositeAxisKey]: { opposite: !axisOptions.opposite },
+              series: [
+                {
+                  data: [],
+                  type: "line",
+                  visible: true,
+                  name: "Series 1",
+                },
+              ],
+            },
+            callback: (api) => (chartApi = api),
+          });
+
+          const items = getChartLegendItems(chartApi!.chart);
+          expect(items[0].isSecondary).toBe(axisOptions.opposite);
+        },
+      );
+
+      test("handles multiple axes", () => {
+        let chartApi: CoreChartProps.ChartAPI | null = null;
+        renderChart({
+          highcharts,
+          options: {
+            chart: chartOptions,
+            [axisKey]: [{ opposite: false }, { opposite: true }],
+            series: [
+              {
+                type: "line",
+                visible: true,
+                name: "Primary Series",
+                [axisKey]: 0,
+              },
+              {
+                type: "line",
+                visible: true,
+                name: "Secondary Series",
+                [axisKey]: 1,
+              },
+            ],
+          },
+          callback: (api) => (chartApi = api),
+        });
+
+        const items = getChartLegendItems(chartApi!.chart);
+        expect(items).toHaveLength(2);
+        expect(items[0].isSecondary).toBe(false);
+        expect(items[1].isSecondary).toBe(true);
+      });
+    });
+
+    test.each(["pie", "gauge", "solidgauge"] as const)("sets isSecondary to false for %s", (type) => {
+      let chartApi: CoreChartProps.ChartAPI | null = null;
+      renderChart({
+        highcharts,
+        options: {
+          series: [
+            {
+              type,
+              visible: true,
+              showInLegend: true,
+              name: "Series",
+              data: [
+                { name: "Segment 1", color: "red", value: 30 },
+                { name: "Segment 2", color: "blue", value: 70 },
+              ],
+            },
+          ],
+        },
+        callback: (api) => (chartApi = api),
+      });
+
+      const items = getChartLegendItems(chartApi!.chart);
+
+      if (type === "gauge" || type === "solidgauge") {
+        expect(items).toHaveLength(1);
+        expect(items[0].isSecondary).toBe(false);
+      } else {
+        expect(items).toHaveLength(2);
+        expect(items[0].isSecondary).toBe(false);
+        expect(items[1].isSecondary).toBe(false);
+      }
+    });
+  });
+
+  describe("getLegendsProps", () => {
+    describe.each([{ inverted: true }, { inverted: false }])("charts, chartOptions = %s", (chartOptions) => {
+      const axisKey = chartOptions.inverted ? "xAxis" : "yAxis";
+      const oppositeAxisKey = chartOptions.inverted ? "yAxis" : "xAxis";
+
+      test("returns primary legend but no secondary legend when only primary series exist", () => {
+        const options: highcharts.Options = {
+          chart: chartOptions,
+          [axisKey]: [{ opposite: false }, { opposite: false }],
+          series: [
+            { type: "line", name: "Series 1", [axisKey]: 0 },
+            { type: "line", name: "Series 2", [axisKey]: 1 },
+          ],
+        };
+        const result = getLegendsProps(options, undefined);
+        expect(result.primary).toBeDefined();
+        expect(result.secondary).toBeUndefined();
+      });
+
+      test("returns both primary and secondary legends when both axis types have series", () => {
+        const options: highcharts.Options = {
+          chart: chartOptions,
+          [axisKey]: [{ opposite: false }, { opposite: true }],
+          series: [
+            { type: "line", name: "Series 1", [axisKey]: 0 },
+            { type: "line", name: "Series 2", [axisKey]: 1 },
+          ],
+        };
+        const result = getLegendsProps(options, undefined);
+        expect(result.primary).toBeDefined();
+        expect(result.secondary).toBeDefined();
+      });
+
+      test("returns no legends when no series exist", () => {
+        const options: highcharts.Options = {
+          chart: chartOptions,
+          [axisKey]: [{ opposite: false }, { opposite: true }],
+          series: [],
+        };
+        const result = getLegendsProps(options, undefined);
+        expect(result.primary).toBeUndefined();
+        expect(result.secondary).toBeUndefined();
+      });
+
+      test("returns only primary legend when secondary series has showInLegend=false", () => {
+        const options: highcharts.Options = {
+          chart: chartOptions,
+          [axisKey]: [{ opposite: false }, { opposite: true }],
+          series: [
+            { type: "line", name: "Series 1", [axisKey]: 0 },
+            { type: "line", name: "Series 2", [axisKey]: 1, showInLegend: false },
+          ],
+        };
+        const result = getLegendsProps(options, undefined);
+        expect(result.primary).toBeDefined();
+        expect(result.secondary).toBeUndefined();
+      });
+
+      test("returns both legends when series reference axes by id", () => {
+        const options: highcharts.Options = {
+          chart: chartOptions,
+          [axisKey]: [
+            { id: "primary", opposite: false },
+            { id: "secondary", opposite: true },
+          ],
+          series: [
+            { type: "line", name: "Series 1", [axisKey]: "primary" },
+            { type: "line", name: "Series 2", [axisKey]: "secondary" },
+          ],
+        };
+        const result = getLegendsProps(options, undefined);
+        expect(result.primary).toBeDefined();
+        expect(result.secondary).toBeDefined();
+      });
+
+      test("returns both legends when series use default axis (defaults to 0)", () => {
+        const options: highcharts.Options = {
+          chart: chartOptions,
+          [axisKey]: [{ opposite: false }, { opposite: true }],
+          series: [
+            { type: "line", name: "Series 1" },
+            { type: "line", name: "Series 2", [axisKey]: 1 },
+          ],
+        };
+        const result = getLegendsProps(options, undefined);
+        expect(result.primary).toBeDefined();
+        expect(result.secondary).toBeDefined();
+      });
+
+      test("returns only primary legend when ignoring the opposite axis key", () => {
+        const options: highcharts.Options = {
+          chart: chartOptions,
+          [axisKey]: [{ opposite: false }],
+          [oppositeAxisKey]: [{ opposite: false }, { opposite: true }],
+          series: [
+            { type: "line", name: "Series 1", [oppositeAxisKey]: 0, [axisKey]: 0 },
+            { type: "line", name: "Series 2", [oppositeAxisKey]: 1, [axisKey]: 0 },
+          ],
+        };
+        const result = getLegendsProps(options, undefined);
+        expect(result.primary).toBeDefined();
+        expect(result.secondary).toBeUndefined();
+      });
+    });
+  });
 });
diff --git a/src/core/__tests__/chart-core-visibility.test.tsx b/src/core/__tests__/chart-core-visibility.test.tsx
index e058d081..436d71ad 100644
--- a/src/core/__tests__/chart-core-visibility.test.tsx
+++ b/src/core/__tests__/chart-core-visibility.test.tsx
@@ -135,9 +135,9 @@ describe("CoreChart: visibility", () => {
       expect.objectContaining({
         detail: {
           items: [
-            { id: "L1", name: "L1", marker: expect.anything(), visible: false, highlighted: false },
-            { id: "L2", name: "L2", marker: expect.anything(), visible: true, highlighted: false },
-            { id: "L3", name: "L3", marker: expect.anything(), visible: true, highlighted: false },
+            { id: "L1", name: "L1", marker: expect.anything(), visible: false, highlighted: false, isSecondary: false },
+            { id: "L2", name: "L2", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
+            { id: "L3", name: "L3", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
           ],
           isApiCall: false,
         },
@@ -152,9 +152,9 @@ describe("CoreChart: visibility", () => {
       expect.objectContaining({
         detail: {
           items: [
-            { id: "L1", name: "L1", marker: expect.anything(), visible: false, highlighted: false },
-            { id: "L2", name: "L2", marker: expect.anything(), visible: true, highlighted: false },
-            { id: "L3", name: "L3", marker: expect.anything(), visible: false, highlighted: false },
+            { id: "L1", name: "L1", marker: expect.anything(), visible: false, highlighted: false, isSecondary: false },
+            { id: "L2", name: "L2", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
+            { id: "L3", name: "L3", marker: expect.anything(), visible: false, highlighted: false, isSecondary: false },
           ],
           isApiCall: false,
         },
@@ -169,9 +169,9 @@ describe("CoreChart: visibility", () => {
       expect.objectContaining({
         detail: {
           items: [
-            { id: "L1", name: "L1", marker: expect.anything(), visible: true, highlighted: false },
-            { id: "L2", name: "L2", marker: expect.anything(), visible: true, highlighted: false },
-            { id: "L3", name: "L3", marker: expect.anything(), visible: true, highlighted: false },
+            { id: "L1", name: "L1", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
+            { id: "L2", name: "L2", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
+            { id: "L3", name: "L3", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
           ],
           isApiCall: false,
         },
@@ -234,8 +234,8 @@ describe("CoreChart: visibility", () => {
       expect.objectContaining({
         detail: {
           items: [
-            { id: "1", name: "Line", marker: expect.anything(), visible: true, highlighted: false },
-            { id: "2", name: "Line", marker: expect.anything(), visible: true, highlighted: false },
+            { id: "1", name: "Line", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
+            { id: "2", name: "Line", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
           ],
           isApiCall: false,
         },
@@ -248,8 +248,22 @@ describe("CoreChart: visibility", () => {
       expect.objectContaining({
         detail: {
           items: [
-            { id: "1", name: "Line", marker: expect.anything(), visible: false, highlighted: false },
-            { id: "2", name: "Line", marker: expect.anything(), visible: false, highlighted: false },
+            {
+              id: "1",
+              name: "Line",
+              marker: expect.anything(),
+              visible: false,
+              highlighted: false,
+              isSecondary: false,
+            },
+            {
+              id: "2",
+              name: "Line",
+              marker: expect.anything(),
+              visible: false,
+              highlighted: false,
+              isSecondary: false,
+            },
           ],
           isApiCall: false,
         },
@@ -292,9 +306,9 @@ describe("CoreChart: visibility", () => {
       expect.objectContaining({
         detail: {
           items: [
-            { id: "A", name: "A", marker: expect.anything(), visible: true, highlighted: false },
-            { id: "B", name: "B", marker: expect.anything(), visible: false, highlighted: false },
-            { id: "C", name: "C", marker: expect.anything(), visible: true, highlighted: false },
+            { id: "A", name: "A", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
+            { id: "B", name: "B", marker: expect.anything(), visible: false, highlighted: false, isSecondary: false },
+            { id: "C", name: "C", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
           ],
           isApiCall: false,
         },
@@ -309,9 +323,9 @@ describe("CoreChart: visibility", () => {
       expect.objectContaining({
         detail: {
           items: [
-            { id: "A", name: "A", marker: expect.anything(), visible: true, highlighted: false },
-            { id: "B", name: "B", marker: expect.anything(), visible: false, highlighted: false },
-            { id: "C", name: "C", marker: expect.anything(), visible: false, highlighted: false },
+            { id: "A", name: "A", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
+            { id: "B", name: "B", marker: expect.anything(), visible: false, highlighted: false, isSecondary: false },
+            { id: "C", name: "C", marker: expect.anything(), visible: false, highlighted: false, isSecondary: false },
           ],
           isApiCall: false,
         },
@@ -326,9 +340,9 @@ describe("CoreChart: visibility", () => {
       expect.objectContaining({
         detail: {
           items: [
-            { id: "A", name: "A", marker: expect.anything(), visible: true, highlighted: false },
-            { id: "B", name: "B", marker: expect.anything(), visible: true, highlighted: false },
-            { id: "C", name: "C", marker: expect.anything(), visible: true, highlighted: false },
+            { id: "A", name: "A", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
+            { id: "B", name: "B", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
+            { id: "C", name: "C", marker: expect.anything(), visible: true, highlighted: false, isSecondary: false },
           ],
           isApiCall: false,
         },
@@ -398,8 +412,22 @@ describe("CoreChart: visibility", () => {
       expect.objectContaining({
         detail: {
           items: [
-            { id: "1", name: "Segment", marker: expect.anything(), visible: true, highlighted: false },
-            { id: "2", name: "Segment", marker: expect.anything(), visible: true, highlighted: false },
+            {
+              id: "1",
+              name: "Segment",
+              marker: expect.anything(),
+              visible: true,
+              highlighted: false,
+              isSecondary: false,
+            },
+            {
+              id: "2",
+              name: "Segment",
+              marker: expect.anything(),
+              visible: true,
+              highlighted: false,
+              isSecondary: false,
+            },
           ],
           isApiCall: false,
         },
@@ -412,8 +440,22 @@ describe("CoreChart: visibility", () => {
       expect.objectContaining({
         detail: {
           items: [
-            { id: "1", name: "Segment", marker: expect.anything(), visible: false, highlighted: false },
-            { id: "2", name: "Segment", marker: expect.anything(), visible: false, highlighted: false },
+            {
+              id: "1",
+              name: "Segment",
+              marker: expect.anything(),
+              visible: false,
+              highlighted: false,
+              isSecondary: false,
+            },
+            {
+              id: "2",
+              name: "Segment",
+              marker: expect.anything(),
+              visible: false,
+              highlighted: false,
+              isSecondary: false,
+            },
           ],
           isApiCall: false,
         },
diff --git a/src/core/__tests__/common.tsx b/src/core/__tests__/common.tsx
index bf5bd025..0e36772e 100644
--- a/src/core/__tests__/common.tsx
+++ b/src/core/__tests__/common.tsx
@@ -93,3 +93,18 @@ export function hoverLegendItem(index: number, wrapper: BaseChartWrapper = creat
     fireEvent.mouseOver(wrapper.findLegend()!.findItems()[index].getElement());
   });
 }
+
+export function selectSecondaryLegendItem(index: number, wrapper: ExtendedTestWrapper = createChartWrapper()) {
+  act(() => wrapper.findSecondaryLegend()!.findItems()[index].click());
+}
+
+export function toggleSecondaryLegendItem(index: number, wrapper: ExtendedTestWrapper = createChartWrapper()) {
+  const modifier = Math.random() > 0.5 ? { metaKey: true } : { ctrlKey: true };
+  act(() => wrapper.findSecondaryLegend()!.findItems()[index].click(modifier));
+}
+
+export function hoverSecondaryLegendItem(index: number, wrapper: ExtendedTestWrapper = createChartWrapper()) {
+  act(() => {
+    fireEvent.mouseOver(wrapper.findSecondaryLegend()!.findItems()[index].getElement());
+  });
+}
diff --git a/src/core/chart-api/chart-extra-legend.tsx b/src/core/chart-api/chart-extra-legend.tsx
index a8d06ffe..8f8e369c 100644
--- a/src/core/chart-api/chart-extra-legend.tsx
+++ b/src/core/chart-api/chart-extra-legend.tsx
@@ -82,9 +82,9 @@ export class ChartExtraLegend extends AsyncStore<ReactiveLegendState> {
 
   private initLegend = () => {
     const itemSpecs = getChartLegendItems(this.context.chart());
-    const legendItems = itemSpecs.map(({ id, name, color, markerType, visible }) => {
+    const legendItems = itemSpecs.map(({ id, name, color, markerType, visible, isSecondary }) => {
       const marker = this.renderMarker(markerType, color, visible);
-      return { id, name, marker, visible, highlighted: false };
+      return { id, name, marker, visible, isSecondary, highlighted: false };
     });
     this.updateLegendItems(legendItems);
   };
diff --git a/src/core/chart-container.tsx b/src/core/chart-container.tsx
index c761ab83..08e6a5cc 100644
--- a/src/core/chart-container.tsx
+++ b/src/core/chart-container.tsx
@@ -28,7 +28,8 @@ interface ChartContainerProps {
   header?: React.ReactNode;
   filter?: React.ReactNode;
   navigator?: React.ReactNode;
-  legend?: React.ReactNode;
+  primaryLegend?: React.ReactNode;
+  secondaryLegend?: React.ReactNode;
   legendBottomMaxHeight?: number;
   legendPosition: "bottom" | "side";
   footer?: React.ReactNode;
@@ -46,7 +47,8 @@ export function ChartContainer({
   header,
   filter,
   footer,
-  legend,
+  primaryLegend,
+  secondaryLegend,
   legendPosition,
   legendBottomMaxHeight,
   navigator,
@@ -66,6 +68,7 @@ export function ChartContainer({
   const withMinHeight = (height: number) => Math.max(chartMinHeight ?? DEFAULT_CHART_MIN_HEIGHT, height) - heightOffset;
   const measuredChartHeight = withMinHeight(measures.chart - measures.header - measures.footer);
   const effectiveChartHeight = fitHeight ? measuredChartHeight : withMinHeight(chartHeight ?? DEFAULT_CHART_HEIGHT);
+  const hasLegend = primaryLegend || secondaryLegend;
   return (
     <div
       ref={refs.chart}
@@ -79,7 +82,7 @@ export function ChartContainer({
         {filter}
       </div>
 
-      {legend && legendPosition === "side" ? (
+      {hasLegend && legendPosition === "side" ? (
         <div className={styles["chart-plot-and-legend-wrapper"]}>
           <div
             style={{ minInlineSize: chartMinWidth ?? 0 }}
@@ -90,7 +93,8 @@ export function ChartContainer({
             {noData}
           </div>
           <div className={styles["side-legend-container"]} style={{ maxBlockSize: effectiveChartHeight }}>
-            {legend}
+            {primaryLegend}
+            {secondaryLegend}
           </div>
         </div>
       ) : (
@@ -100,15 +104,21 @@ export function ChartContainer({
         >
           {verticalAxisTitle}
           {chart(effectiveChartHeight)}
-          {!legend || legendPosition === "bottom" ? noData : null}
+          {!hasLegend || legendPosition === "bottom" ? noData : null}
         </div>
       )}
 
       <div ref={refs.footer} style={chartMinWidth !== undefined ? { minInlineSize: chartMinWidth } : {}}>
         {navigator && <div className={testClasses["chart-navigator"]}>{navigator}</div>}
-        {legend &&
-          legendPosition === "bottom" &&
-          (legendBottomMaxHeight ? <div style={{ maxHeight: `${legendBottomMaxHeight}px` }}>{legend}</div> : legend)}
+        {hasLegend && legendPosition === "bottom" && (
+          <div
+            className={styles["bottom-legend-container"]}
+            style={{ maxBlockSize: legendBottomMaxHeight ? `${legendBottomMaxHeight}px` : undefined }}
+          >
+            {primaryLegend}
+            {secondaryLegend}
+          </div>
+        )}
         {footer}
       </div>
     </div>
diff --git a/src/core/chart-core.tsx b/src/core/chart-core.tsx
index ad4116b4..1678c3a7 100644
--- a/src/core/chart-core.tsx
+++ b/src/core/chart-core.tsx
@@ -26,7 +26,7 @@ import { VerticalAxisTitle } from "./components/core-vertical-axis-title";
 import { getFormatter } from "./formatters";
 import { useChartI18n } from "./i18n-utils";
 import { CoreChartProps } from "./interfaces";
-import { getPointAccessibleDescription, hasVisibleLegendItems } from "./utils";
+import { getLegendsProps, getPointAccessibleDescription } from "./utils";
 
 import styles from "./styles.css.js";
 import testClasses from "./test-classes/styles.css.js";
@@ -84,6 +84,12 @@ export function InternalCoreChart({
   const mergedRootRef = useMergeRefs(rootRef, __internalRootRef);
   const rootProps = { ref: mergedRootRef, className: rootClassName, ...getDataAttributes(rest) };
   const legendPosition = legendOptions?.position ?? "bottom";
+  const commonLegendProps = {
+    api: api,
+    i18nStrings,
+    onItemHighlight: onLegendItemHighlight,
+    getLegendTooltipContent: rest.getLegendTooltipContent,
+  };
   const containerProps = {
     fitHeight,
     chartHeight,
@@ -113,7 +119,39 @@ export function InternalCoreChart({
 
   const apiOptions = api.getOptions();
   const inverted = !!options.chart?.inverted;
-  const isRtl = () => getIsRtl(rootRef?.current);
+  const isRtl = getIsRtl(rootRef?.current);
+
+  // Compute RTL-adjusted options that will be used for both legend positioning and chart rendering
+  const rtlAdjustedOptions: Highcharts.Options = {
+    ...options,
+    xAxis: castArray(options.xAxis)?.map((xAxisOptions) => ({
+      ...Styles.xAxisOptions,
+      ...xAxisOptions,
+      // Depending on the chart.inverted the x-axis can be rendered as vertical, and needs to respect page direction.
+      reversed: !inverted && isRtl ? !xAxisOptions.reversed : xAxisOptions.reversed,
+      opposite: inverted && isRtl ? !xAxisOptions.opposite : xAxisOptions.opposite,
+      className: xAxisClassName(inverted, xAxisOptions.className),
+      title: axisTitle(xAxisOptions.title ?? {}, !inverted || verticalAxisTitlePlacement === "side"),
+      labels: axisLabels(xAxisOptions.labels ?? {}),
+    })),
+    yAxis: castArray(options.yAxis)?.map((yAxisOptions) => ({
+      ...Styles.yAxisOptions,
+      ...yAxisOptions,
+      // Depending on the chart.inverted the y-axis can be rendered as vertical, and needs to respect page direction.
+      reversed: inverted && isRtl ? !yAxisOptions.reversed : yAxisOptions.reversed,
+      opposite: !inverted && isRtl ? !yAxisOptions.opposite : yAxisOptions.opposite,
+      className: yAxisClassName(inverted, yAxisOptions.className),
+      title: axisTitle(yAxisOptions.title ?? {}, inverted || verticalAxisTitlePlacement === "side"),
+      labels: axisLabels(yAxisOptions.labels ?? {}),
+      plotLines: yAxisPlotLines(yAxisOptions.plotLines, emphasizeBaseline),
+      // We use reversed stack by default so that the order of points in the tooltip and series in the legend
+      // correspond the order of stacks.
+      reversedStacks: yAxisOptions.reversedStacks ?? true,
+    })),
+  };
+
+  const legendProps = getLegendsProps(rtlAdjustedOptions, legendOptions);
+
   return (
     <div {...rootProps}>
       <ChartContainer
@@ -122,8 +160,12 @@ export function InternalCoreChart({
           // The Highcharts options takes all provided Highcharts options and custom properties and merges them together, so that
           // the Cloudscape features and custom Highcharts extensions co-exist.
           // For certain options we provide Cloudscape styling, but in all cases this can be explicitly overridden.
+          // We use the rtl adjusted axes (instead of the original options.xAxis/yAxis) to ensure the chart renders
+          // with the correct axis orientation for RTL layouts, matching what was used for legend positioning above.
           const highchartsOptions: Highcharts.Options = {
             ...options,
+            xAxis: rtlAdjustedOptions.xAxis,
+            yAxis: rtlAdjustedOptions.yAxis,
             // Hide credits by default.
             credits: options.credits ?? { enabled: false },
             // Hide chart title by default.
@@ -258,30 +300,6 @@ export function InternalCoreChart({
                 dataLabels: { ...Styles.pieSeriesDataLabels, ...options.plotOptions?.pie?.dataLabels },
               },
             },
-            xAxis: castArray(options.xAxis)?.map((xAxisOptions) => ({
-              ...Styles.xAxisOptions,
-              ...xAxisOptions,
-              // Depending on the chart.inverted the x-axis can be rendered as vertical, and needs to respect page direction.
-              reversed: !inverted && isRtl() ? !xAxisOptions.reversed : xAxisOptions.reversed,
-              opposite: inverted && isRtl() ? !xAxisOptions.opposite : xAxisOptions.opposite,
-              className: xAxisClassName(inverted, xAxisOptions.className),
-              title: axisTitle(xAxisOptions.title ?? {}, !inverted || verticalAxisTitlePlacement === "side"),
-              labels: axisLabels(xAxisOptions.labels ?? {}),
-            })),
-            yAxis: castArray(options.yAxis)?.map((yAxisOptions) => ({
-              ...Styles.yAxisOptions,
-              ...yAxisOptions,
-              // Depending on the chart.inverted the y-axis can be rendered as vertical, and needs to respect page direction.
-              reversed: inverted && isRtl() ? !yAxisOptions.reversed : yAxisOptions.reversed,
-              opposite: !inverted && isRtl() ? !yAxisOptions.opposite : yAxisOptions.opposite,
-              className: yAxisClassName(inverted, yAxisOptions.className),
-              title: axisTitle(yAxisOptions.title ?? {}, inverted || verticalAxisTitlePlacement === "side"),
-              labels: axisLabels(yAxisOptions.labels ?? {}),
-              plotLines: yAxisPlotLines(yAxisOptions.plotLines, emphasizeBaseline),
-              // We use reversed stack by default so that the order of points in the tooltip and series in the legend
-              // correspond the order of stacks.
-              reversedStacks: yAxisOptions.reversedStacks ?? true,
-            })),
             // We don't use Highcharts tooltip, but certain tooltip options such as tooltip.snap or tooltip.shared
             // affect the hovering behavior of Highcharts. That is only the case when the tooltip is not disabled,
             // so we render it, but hide with styles.
@@ -301,15 +319,17 @@ export function InternalCoreChart({
           );
         }}
         navigator={navigator}
-        legend={
-          context.legendEnabled && hasVisibleLegendItems(options) ? (
+        primaryLegend={
+          context.legendEnabled && legendProps.primary ? (
+            <ChartLegend {...commonLegendProps} {...legendProps.primary} className={testClasses["legend-primary"]} />
+          ) : null
+        }
+        secondaryLegend={
+          context.legendEnabled && legendProps.secondary ? (
             <ChartLegend
-              {...legendOptions}
-              position={legendPosition}
-              api={api}
-              i18nStrings={i18nStrings}
-              onItemHighlight={onLegendItemHighlight}
-              getLegendTooltipContent={rest.getLegendTooltipContent}
+              {...commonLegendProps}
+              {...legendProps.secondary}
+              className={testClasses["legend-secondary"]}
             />
           ) : null
         }
diff --git a/src/core/components/core-legend.tsx b/src/core/components/core-legend.tsx
index d2c850e6..600fe725 100644
--- a/src/core/components/core-legend.tsx
+++ b/src/core/components/core-legend.tsx
@@ -7,13 +7,15 @@ import { ChartLegend as ChartLegendComponent } from "../../internal/components/c
 import { fireNonCancelableEvent, NonCancelableEventHandler } from "../../internal/events";
 import { useSelector } from "../../internal/utils/async-store";
 import { ChartAPI } from "../chart-api";
-import { BaseI18nStrings, CoreChartProps } from "../interfaces";
+import { CoreChartProps, CoreI18nStrings } from "../interfaces";
 
 export function ChartLegend({
   api,
   title,
   actions,
-  position,
+  alignment,
+  className,
+  isSecondary,
   i18nStrings,
   onItemHighlight,
   getLegendTooltipContent,
@@ -21,30 +23,66 @@ export function ChartLegend({
 }: {
   api: ChartAPI;
   title?: string;
+  className?: string;
+  isSecondary: boolean;
   actions?: React.ReactNode;
-  position: "bottom" | "side";
-  horizontalAlignment?: CoreChartProps.LegendOptionsHorizontalAlignment;
-  i18nStrings?: BaseI18nStrings;
+  alignment: "horizontal" | "vertical";
+  horizontalAlignment?: "start" | "center" | "end";
+  i18nStrings?: CoreI18nStrings;
   onItemHighlight?: NonCancelableEventHandler<CoreChartProps.LegendItemHighlightDetail>;
   getLegendTooltipContent?: CoreChartProps.GetLegendTooltipContent;
 }) {
   const i18n = useInternalI18n("[charts]");
-  const ariaLabel = i18n("i18nStrings.legendAriaLabel", i18nStrings?.legendAriaLabel);
+  const legendAriaLabel = i18n("i18nStrings.legendAriaLabel", i18nStrings?.legendAriaLabel);
+  // There's currently no builtin property for the secondary ARIA
+  // label, it must be explicitly provided by the consumers.
+  const secondaryLegendAriaLabel = i18nStrings?.secondaryLegendAriaLabel;
+  const ariaLabel = isSecondary ? secondaryLegendAriaLabel : legendAriaLabel;
+
   const legendItems = useSelector(api.legendStore, (s) => s.items);
+  const someHighlighted = legendItems.some((item) => item.highlighted);
   const isChartTooltipPinned = useSelector(api.tooltipStore, (s) => s.pinned);
+  const filteredItems = isSecondary
+    ? legendItems.filter((item) => item.isSecondary)
+    : legendItems.filter((item) => !item.isSecondary);
+
+  const onToggleItem = (itemId: string) => {
+    const visibleItems = legendItems.filter((i) => i.visible).map((i) => i.id);
+    if (visibleItems.includes(itemId)) {
+      api.onItemVisibilityChange(visibleItems.filter((visibleItemId) => visibleItemId !== itemId));
+    } else {
+      api.onItemVisibilityChange([...visibleItems, itemId]);
+    }
+    // Needed for touch devices.
+    api.onClearChartItemsHighlight();
+  };
+
+  const onSelectItem = (itemId: string) => {
+    const visibleItems = legendItems.filter((i) => i.visible).map((i) => i.id);
+    if (visibleItems.length === 1 && visibleItems[0] === itemId) {
+      api.onItemVisibilityChange(legendItems.map((i) => i.id));
+    } else {
+      api.onItemVisibilityChange([itemId]);
+    }
+    // Needed for touch devices.
+    api.onClearChartItemsHighlight();
+  };
 
-  if (legendItems.length === 0) {
+  if (filteredItems.length === 0) {
     return null;
   }
   return (
     <ChartLegendComponent
       ariaLabel={ariaLabel}
+      className={className}
       legendTitle={title}
-      items={legendItems}
+      items={filteredItems}
+      someHighlighted={someHighlighted}
       horizontalAlignment={horizontalAlignment}
       actions={actions}
-      position={position}
-      onItemVisibilityChange={api.onItemVisibilityChange}
+      alignment={alignment}
+      onToggleItem={onToggleItem}
+      onSelectItem={onSelectItem}
       onItemHighlightExit={api.onClearChartItemsHighlight}
       onItemHighlightEnter={(item) => {
         api.onHighlightChartItems([item.id]);
diff --git a/src/core/interfaces.ts b/src/core/interfaces.ts
index d699a4e2..1b88be10 100644
--- a/src/core/interfaces.ts
+++ b/src/core/interfaces.ts
@@ -125,6 +125,18 @@ export interface BaseI18nStrings {
   chartRoleDescription?: string;
 }
 
+export interface CoreI18nStrings extends BaseI18nStrings {
+  /**
+   * ARIA label for the secondary legend when using dual axes charts.
+   *
+   * **Important**: When using dual axes, you should explicitly provide visible titles or ARIA labels
+   * for both the primary and secondary legends to ensure proper accessibility. The primary legend
+   * has built-in i18n support through `legendAriaLabel`, but the secondary legend currently requires
+   * this property to be explicitly provided.
+   */
+  secondaryLegendAriaLabel?: string;
+}
+
 export interface WithCartesianI18nStrings {
   /**
    * An object that contains all of the localized strings required by the component.
@@ -385,7 +397,7 @@ export interface CoreChartProps
    * An object that contains all of the localized strings required by the component.
    * @i18n
    */
-  i18nStrings?: CartesianI18nStrings & PieI18nStrings;
+  i18nStrings?: CartesianI18nStrings & PieI18nStrings & CoreI18nStrings;
 }
 
 export namespace CoreChartProps {
@@ -421,7 +433,15 @@ export namespace CoreChartProps {
     bottomMaxHeight?: number;
     position?: "bottom" | "side";
     /**
-     * This property only applies when `position="bottom"`.
+     * This property only applies when there are secondary items.
+     */
+    secondaryLegendTitle?: string;
+    /**
+     * This property only applies when there are secondary items.
+     */
+    secondaryLegendActions?: React.ReactNode;
+    /**
+     * This property only applies when there are no secondary items and `position="bottom"`.
      */
     horizontalAlignment?: LegendOptionsHorizontalAlignment;
   }
diff --git a/src/core/styles.scss b/src/core/styles.scss
index 73aa2c79..21284062 100644
--- a/src/core/styles.scss
+++ b/src/core/styles.scss
@@ -112,9 +112,19 @@ $side-legend-min-inline-size: max(20%, 150px);
   flex: 1;
 }
 
+.bottom-legend-container {
+  display: flex;
+  overflow: auto;
+  gap: cs.$space-scaled-xxl;
+  justify-content: space-between;
+}
+
 .side-legend-container {
   flex: 0;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: cs.$space-scaled-s;
+  margin-inline-start: cs.$space-scaled-s;
   max-inline-size: $side-legend-max-inline-size;
   min-inline-size: $side-legend-min-inline-size;
 }
diff --git a/src/core/test-classes/styles.scss b/src/core/test-classes/styles.scss
index c18ceb90..d5bbdbc2 100644
--- a/src/core/test-classes/styles.scss
+++ b/src/core/test-classes/styles.scss
@@ -6,6 +6,8 @@
 .root,
 .fallback,
 .no-data,
+.legend-primary,
+.legend-secondary,
 .legend-item-warning,
 .chart-plot,
 .chart-plot-wrapper,
diff --git a/src/core/utils.ts b/src/core/utils.ts
index 87b2243b..77bbd089 100644
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -5,9 +5,10 @@ import type Highcharts from "highcharts";
 
 import { ChartSeriesMarkerType } from "../internal/components/series-marker";
 import { getChartSeries } from "../internal/utils/chart-series";
+import { castArray } from "../internal/utils/utils";
 import { getFormatter } from "./formatters";
 import { ChartLabels } from "./i18n-utils";
-import { Rect } from "./interfaces";
+import { CoreChartProps, Rect } from "./interfaces";
 
 export interface LegendItemSpec {
   id: string;
@@ -15,6 +16,7 @@ export interface LegendItemSpec {
   markerType: ChartSeriesMarkerType;
   color: string;
   visible: boolean;
+  isSecondary: boolean;
 }
 
 // The below functions extract unique identifier from series, point, or options. The identifier can be item's ID or name.
@@ -132,7 +134,8 @@ export function getPointColor(point?: Highcharts.Point): string {
 // Highcharts legend is disabled. Instead, we use this custom method to collect legend items from the chart.
 export function getChartLegendItems(chart: Highcharts.Chart): readonly LegendItemSpec[] {
   const legendItems: LegendItemSpec[] = [];
-  const addSeriesItem = (series: Highcharts.Series) => {
+  const isInverted = chart.inverted ?? false;
+  const addSeriesItem = (series: Highcharts.Series, isSecondary: boolean) => {
     // The pie series is not shown in the legend. Instead, we show pie segments.
     if (series.type === "pie") {
       return;
@@ -151,10 +154,11 @@ export function getChartLegendItems(chart: Highcharts.Chart): readonly LegendIte
         markerType: getSeriesMarkerType(series),
         color: getSeriesColor(series),
         visible: series.visible,
+        isSecondary,
       });
     }
   };
-  const addPointItem = (point: Highcharts.Point) => {
+  const addPointItem = (point: Highcharts.Point, isSecondary: boolean) => {
     if (point.series.type === "pie") {
       legendItems.push({
         id: getPointId(point),
@@ -162,29 +166,103 @@ export function getChartLegendItems(chart: Highcharts.Chart): readonly LegendIte
         markerType: getSeriesMarkerType(point.series),
         color: getPointColor(point),
         visible: point.visible,
+        isSecondary,
       });
     }
   };
   for (const s of getChartSeries(chart.series)) {
-    addSeriesItem(s);
-    s.data.forEach(addPointItem);
+    const valueAxis = isInverted ? s.xAxis : s.yAxis;
+    const isSecondary = valueAxis?.options?.opposite ?? false;
+    addSeriesItem(s, isSecondary);
+    s.data.forEach((p) => addPointItem(p, isSecondary));
   }
   return legendItems;
 }
 
-export function hasVisibleLegendItems(options: Highcharts.Options) {
-  return !!options.series?.some((series) => {
-    // The pie series is not shown in the legend, but their segments are always shown.
+export type LegendItemOptions = Highcharts.SeriesOptionsType | Highcharts.PointOptionsType;
+
+export function getVisibleLegendItems(options: Highcharts.Options) {
+  const isInverted = options.chart?.inverted ?? false;
+  const valueAxes = (isInverted ? castArray(options.xAxis) : castArray(options.yAxis)) ?? [];
+  const defaultOpposite = valueAxes.length > 0 ? (valueAxes[0].opposite ?? false) : false;
+
+  const primaryItems: LegendItemOptions[] = [];
+  const secondaryItems: LegendItemOptions[] = [];
+  const addLegendItem = (item: LegendItemOptions) => {
+    if (isSecondaryLegendItem(item, isInverted, defaultOpposite, valueAxes)) {
+      secondaryItems.push(item);
+    } else {
+      primaryItems.push(item);
+    }
+  };
+
+  options.series?.forEach((series) => {
+    // The pie series is not shown in the legend. Instead, we show pie segments (points).
     if (series.type === "pie") {
-      return Array.isArray(series.data) && series.data.length > 0;
+      if (Array.isArray(series.data)) {
+        series.data.forEach((point) => addLegendItem(point));
+      }
+      return;
     }
     // We only support errorbar series that are linked to other series. Those are not represented separately
     // in the legend, but can be controlled from the outside, using controllable items visibility API.
     if (series.type === "errorbar") {
-      return false;
+      return;
+    }
+    if (series.showInLegend !== false) {
+      addLegendItem(series);
     }
-    return series.showInLegend !== false;
   });
+
+  return { primaryItems, secondaryItems };
+}
+
+function isSecondaryLegendItem(
+  item: LegendItemOptions,
+  isInverted: boolean,
+  defaultOpposite: boolean,
+  valueAxes: Array<{ id?: string; opposite?: boolean }>,
+): boolean {
+  // Only items that have an associated axis can be considered secondary
+  if (item && typeof item === "object" && ("xAxis" in item || "yAxis" in item)) {
+    const axisRef = isInverted ? (item.xAxis ?? 0) : (item.yAxis ?? 0);
+    // An axis reference can be an index into the axes array or an explicitly passed id
+    const valueAxis = typeof axisRef === "number" ? valueAxes[axisRef] : valueAxes.find((a) => a.id === axisRef);
+    return valueAxis?.opposite ?? false;
+  }
+  return defaultOpposite;
+}
+
+export function getLegendsProps(
+  options: CoreChartProps.ChartOptions,
+  legendOptions: CoreChartProps.LegendOptions | undefined,
+) {
+  // While Highcharts supports more than two axes, this
+  // implementation supports at most two, in which case one
+  // of them must be set as opposite (secondary).
+  const { primaryItems, secondaryItems } = getVisibleLegendItems(options);
+  return {
+    primary:
+      primaryItems.length === 0
+        ? undefined
+        : ({
+            isSecondary: false,
+            title: legendOptions?.title,
+            actions: legendOptions?.actions,
+            alignment: legendOptions?.position === "side" ? "vertical" : "horizontal",
+            horizontalAlignment: secondaryItems.length === 0 ? legendOptions?.horizontalAlignment : "start",
+          } as const),
+    secondary:
+      secondaryItems.length === 0
+        ? undefined
+        : ({
+            isSecondary: true,
+            title: legendOptions?.secondaryLegendTitle,
+            actions: legendOptions?.secondaryLegendActions,
+            alignment: legendOptions?.position === "side" ? "vertical" : "horizontal",
+            horizontalAlignment: "end",
+          } as const),
+  };
 }
 
 // This function returns coordinates of a rectangle, including the target point.
diff --git a/src/internal-do-not-use/core-legend/index.tsx b/src/internal-do-not-use/core-legend/index.tsx
index 263856e7..8ee57aba 100644
--- a/src/internal-do-not-use/core-legend/index.tsx
+++ b/src/internal-do-not-use/core-legend/index.tsx
@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { useInternalI18n } from "@cloudscape-design/components/internal/do-not-use/i18n";
+
 import { CoreLegendProps } from "../../core/interfaces";
 import { ChartLegend as ChartLegendComponent } from "../../internal/components/chart-legend";
 import { fireNonCancelableEvent } from "../../internal/events";
@@ -9,7 +11,7 @@ export const CoreLegend = ({
   items,
   title,
   actions,
-  ariaLabel,
+  ariaLabel: legendAriaLabel,
   alignment = "horizontal",
   onItemHighlight,
   onClearHighlight,
@@ -17,7 +19,30 @@ export const CoreLegend = ({
   getLegendTooltipContent,
   horizontalAlignment = "start",
 }: CoreLegendProps) => {
-  const position = alignment === "horizontal" ? "bottom" : "side";
+  const i18n = useInternalI18n("[charts]");
+  const ariaLabel = i18n("i18nStrings.legendAriaLabel", legendAriaLabel);
+
+  const onToggleItem = (itemId: string) => {
+    const visibleItems = items.filter((i) => i.visible).map((i) => i.id);
+    if (visibleItems.includes(itemId)) {
+      fireNonCancelableEvent(onVisibleItemsChange, {
+        items: visibleItems.filter((visibleItemId) => visibleItemId !== itemId),
+      });
+    } else {
+      fireNonCancelableEvent(onVisibleItemsChange, {
+        items: [...visibleItems, itemId],
+      });
+    }
+  };
+
+  const onSelectItem = (itemId: string) => {
+    const visibleItems = items.filter((i) => i.visible).map((i) => i.id);
+    if (visibleItems.length === 1 && visibleItems[0] === itemId) {
+      fireNonCancelableEvent(onVisibleItemsChange, { items: items.map((i) => i.id) });
+    } else {
+      fireNonCancelableEvent(onVisibleItemsChange, { items: [itemId] });
+    }
+  };
 
   if (items.length === 0) {
     return null;
@@ -28,13 +53,15 @@ export const CoreLegend = ({
       items={items}
       actions={actions}
       legendTitle={title}
-      position={position}
+      alignment={alignment}
       horizontalAlignment={horizontalAlignment}
       ariaLabel={ariaLabel}
+      someHighlighted={items.some((item) => item.highlighted)}
+      onToggleItem={onToggleItem}
+      onSelectItem={onSelectItem}
       getTooltipContent={(props) => getLegendTooltipContent?.(props) ?? null}
       onItemHighlightExit={() => fireNonCancelableEvent(onClearHighlight)}
       onItemHighlightEnter={(item) => fireNonCancelableEvent(onItemHighlight, { item })}
-      onItemVisibilityChange={(items) => fireNonCancelableEvent(onVisibleItemsChange, { items })}
     />
   );
 };
diff --git a/src/internal/components/chart-legend/index.tsx b/src/internal/components/chart-legend/index.tsx
index 93cead88..09ab67c4 100644
--- a/src/internal/components/chart-legend/index.tsx
+++ b/src/internal/components/chart-legend/index.tsx
@@ -13,10 +13,9 @@ import {
   useMergeRefs,
   useSingleTabStopNavigation,
 } from "@cloudscape-design/component-toolkit/internal";
-import Box from "@cloudscape-design/components/box";
+import Box, { BoxProps } from "@cloudscape-design/components/box";
 import { InternalChartTooltip } from "@cloudscape-design/components/internal/do-not-use/chart-tooltip";
 
-import { CoreChartProps } from "../../../core/interfaces";
 import { DebouncedCall } from "../../utils/utils";
 import { GetLegendTooltipContentProps, LegendItem, LegendTooltipContent } from "../interfaces";
 
@@ -27,16 +26,22 @@ const TOOLTIP_BLUR_DELAY = 50;
 const HIGHLIGHT_LOST_DELAY = 50;
 const SCROLL_DELAY = 100;
 
+export type LegendAlignment = "horizontal" | "vertical";
+export type LegendHorizontalAlignment = "start" | "center" | "end";
+
 export interface ChartLegendProps {
   items: readonly LegendItem[];
   legendTitle?: string;
   ariaLabel?: string;
+  className?: string;
   actions?: React.ReactNode;
-  position: "bottom" | "side";
-  horizontalAlignment: CoreChartProps.LegendOptionsHorizontalAlignment;
+  someHighlighted: boolean;
+  alignment: LegendAlignment;
+  horizontalAlignment: LegendHorizontalAlignment;
+  onToggleItem: (itemId: string) => void;
+  onSelectItem: (itemId: string) => void;
   onItemHighlightEnter: (item: LegendItem) => void;
   onItemHighlightExit: () => void;
-  onItemVisibilityChange: (hiddenItems: string[]) => void;
   getTooltipContent: (props: GetLegendTooltipContentProps) => null | LegendTooltipContent;
 }
 
@@ -45,8 +50,11 @@ export const ChartLegend = ({
   legendTitle,
   ariaLabel,
   actions,
-  position,
-  onItemVisibilityChange,
+  alignment,
+  className,
+  someHighlighted,
+  onToggleItem,
+  onSelectItem,
   onItemHighlightEnter,
   onItemHighlightExit,
   getTooltipContent,
@@ -203,33 +211,13 @@ export const ChartLegend = ({
     navigationAPI.current!.updateFocusTarget();
   });
 
-  const toggleItem = (itemId: string) => {
-    const visibleItems = items.filter((i) => i.visible).map((i) => i.id);
-    if (visibleItems.includes(itemId)) {
-      onItemVisibilityChange(visibleItems.filter((visibleItemId) => visibleItemId !== itemId));
-    } else {
-      onItemVisibilityChange([...visibleItems, itemId]);
-    }
-    // Needed for touch devices.
-    onItemHighlightExit();
-  };
-
-  const selectItem = (itemId: string) => {
-    const visibleItems = items.filter((i) => i.visible).map((i) => i.id);
-    if (visibleItems.length === 1 && visibleItems[0] === itemId) {
-      onItemVisibilityChange(items.map((i) => i.id));
-    } else {
-      onItemVisibilityChange([itemId]);
-    }
-    // Needed for touch devices.
-    onItemHighlightExit();
-  };
+  const isVertical = alignment === "vertical";
 
   const tooltipTrack = useRef<null | HTMLElement>(null);
   const tooltipTarget = items.find((item) => item.id === tooltipItemId) ?? null;
   tooltipTrack.current = tooltipItemId ? elementsByIdRef.current[tooltipItemId] : null;
   const tooltipContent = tooltipTarget && getTooltipContent({ legendItem: tooltipTarget });
-  const tooltipPosition = position === "bottom" ? "bottom" : "left";
+  const tooltipPosition = isVertical ? "left" : "bottom";
 
   return (
     <SingleTabStopNavigationProvider
@@ -239,110 +227,85 @@ export const ChartLegend = ({
       onUnregisterActive={(element: HTMLElement) => onUnregisterActive(element, navigationAPI)}
     >
       <div
-        ref={containerRef}
         role="toolbar"
         aria-label={legendTitle || ariaLabel}
-        className={clsx(testClasses.root, styles.root, {
-          [styles["root-side"]]: position === "side",
-        })}
+        className={clsx(testClasses.root, styles.root, className)}
         onMouseEnter={() => (isMouseInContainer.current = true)}
         onMouseLeave={() => (isMouseInContainer.current = false)}
       >
         {legendTitle && (
-          <Box
-            fontWeight="bold"
-            className={clsx(testClasses.title, {
-              [styles[`legend-title-${horizontalAlignment}`]]: position === "bottom",
-            })}
-          >
+          <Box fontWeight="bold" className={testClasses.title} textAlign={getBoxTextAlignment(horizontalAlignment)}>
             {legendTitle}
           </Box>
         )}
-
         <div
           // The list element is not focusable. However, the focus lands on it regardless, when testing in Firefox.
           // Setting the tab index to -1 does fix the problem.
           tabIndex={-1}
+          ref={containerRef}
           className={clsx(styles.list, {
-            [styles[`list-bottom-${horizontalAlignment}`]]: position === "bottom",
-            [styles["list-bottom"]]: position === "bottom",
-            [styles["list-side"]]: position === "side",
+            [styles[`list-bottom-${horizontalAlignment}`]]: !isVertical,
+            [styles["list-bottom"]]: !isVertical,
+            [styles["list-side"]]: isVertical,
           })}
         >
           {actions && (
             <>
-              <div
-                className={clsx(testClasses.actions, styles.actions, {
-                  [styles["actions-bottom"]]: position === "bottom",
-                  [styles["actions-side"]]: position === "side",
-                })}
-              >
+              <div className={clsx(testClasses.actions, styles.actions, styles["actions-bottom"])}>
                 {actions}
-                <div
-                  className={clsx(styles["actions-divider"], {
-                    [styles["actions-divider-bottom"]]: position === "bottom",
-                    [styles["actions-divider-side"]]: position === "side",
-                  })}
-                />
+                {!isVertical && <div className={styles["actions-divider-bottom"]} />}
               </div>
+              {isVertical && <div className={styles["actions-divider-side"]} />}
             </>
           )}
-          <div
-            className={clsx({
-              [styles[`legend-bottom-${horizontalAlignment}`]]: position === "bottom",
-              [styles["legend-bottom"]]: position === "bottom",
-              [styles["legend-side"]]: position === "side",
-            })}
-          >
-            {items.map((item, index) => {
-              const handlers = {
-                onMouseEnter: () => {
-                  showHighlight(item.id);
-                  showTooltip(item.id);
-                },
-                onMouseLeave: () => {
-                  clearHighlight();
-                  hideTooltip();
-                },
-                onFocus: () => {
-                  onFocus(index, item.id);
-                },
-                onBlur: (event: React.FocusEvent) => {
-                  onBlur(event);
-                },
-                onKeyDown,
-              };
-              const thisTriggerRef = (elem: null | HTMLElement) => {
-                if (elem) {
-                  elementsByIndexRef.current[index] = elem;
-                  elementsByIdRef.current[item.id] = elem;
-                } else {
-                  delete elementsByIndexRef.current[index];
-                  delete elementsByIdRef.current[index];
-                }
-              };
-              return (
-                <LegendItemTrigger
-                  key={index}
-                  {...handlers}
-                  ref={thisTriggerRef}
-                  onClick={(event) => {
-                    if (event.metaKey || event.ctrlKey) {
-                      toggleItem(item.id);
-                    } else {
-                      selectItem(item.id);
-                    }
-                  }}
-                  isHighlighted={item.highlighted}
-                  someHighlighted={items.some((item) => item.highlighted)}
-                  itemId={item.id}
-                  label={item.name}
-                  visible={item.visible}
-                  marker={item.marker}
-                />
-              );
-            })}
-          </div>
+          {items.map((item, index) => {
+            const handlers = {
+              onMouseEnter: () => {
+                showHighlight(item.id);
+                showTooltip(item.id);
+              },
+              onMouseLeave: () => {
+                clearHighlight();
+                hideTooltip();
+              },
+              onFocus: () => {
+                onFocus(index, item.id);
+              },
+              onBlur: (event: React.FocusEvent) => {
+                onBlur(event);
+              },
+              onKeyDown,
+            };
+            const thisTriggerRef = (elem: null | HTMLElement) => {
+              if (elem) {
+                elementsByIndexRef.current[index] = elem;
+                elementsByIdRef.current[item.id] = elem;
+              } else {
+                delete elementsByIndexRef.current[index];
+                delete elementsByIdRef.current[item.id];
+              }
+            };
+            return (
+              <LegendItemTrigger
+                key={index}
+                {...handlers}
+                ref={thisTriggerRef}
+                onClick={(event) => {
+                  if (event.metaKey || event.ctrlKey) {
+                    onToggleItem(item.id);
+                  } else {
+                    onSelectItem(item.id);
+                  }
+                }}
+                isHighlighted={item.highlighted}
+                someHighlighted={someHighlighted}
+                itemId={item.id}
+                label={item.name}
+                visible={item.visible}
+                marker={item.marker}
+              />
+            );
+          })}
         </div>
         {tooltipContent && (
           <InternalChartTooltip
@@ -373,6 +336,17 @@ export const ChartLegend = ({
   );
 };
 
+function getBoxTextAlignment(horizontalAlignment: LegendHorizontalAlignment): BoxProps.TextAlign {
+  switch (horizontalAlignment) {
+    case "start":
+      return "left";
+    case "center":
+      return "center";
+    case "end":
+      return "right";
+  }
+}
+
 const LegendItemTrigger = forwardRef(
   (
     {
diff --git a/src/internal/components/chart-legend/styles.scss b/src/internal/components/chart-legend/styles.scss
index b7df9dfc..7c063da9 100644
--- a/src/internal/components/chart-legend/styles.scss
+++ b/src/internal/components/chart-legend/styles.scss
@@ -12,31 +12,33 @@
   @include styles.styles-reset;
   @include styles.default-text-style;
 
-  overflow: auto;
-  max-height: inherit;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+
+  inline-size: 100%;
+  max-block-size: inherit;
 
   &:focus {
     outline: none;
   }
 }
 
-.root-side {
-  display: flex;
-  flex-direction: column;
-}
-
 .list {
   display: flex;
+  overflow-y: auto;
   list-style: none;
   margin-block: 0;
   margin-inline: 0;
   padding-block: cs.$space-static-xxxs;
   padding-inline: cs.$space-static-xxxs;
-  padding-block-start: cs.$space-scaled-xs;
+  margin-block-start: cs.$space-scaled-xs;
 }
 
 .list-bottom {
   flex-wrap: wrap;
+  gap: cs.$space-scaled-xxs cs.$space-static-m;
 
   &.list-bottom-start {
     justify-content: start;
@@ -44,40 +46,14 @@
   &.list-bottom-center {
     justify-content: center;
   }
+  &.list-bottom-end {
+    justify-content: end;
+  }
 }
 
 .list-side {
   flex-wrap: nowrap;
   flex-direction: column;
-}
-
-.legend-bottom {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  max-inline-size: 100%;
-  gap: cs.$space-scaled-xxs cs.$space-static-m;
-
-  &.legend-bottom-start {
-    justify-content: start;
-  }
-  &.legend-bottom-center {
-    justify-content: center;
-  }
-}
-
-.legend-title-start {
-  text-align: start;
-}
-
-.legend-title-center {
-  text-align: center;
-}
-
-.legend-side {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
   gap: cs.$space-scaled-xxs cs.$space-static-m;
 }
 
@@ -147,8 +123,11 @@
 }
 
 .actions-divider-side {
-  inline-size: 80%;
-  block-size: 1px;
+  display: block;
+  border: 0;
+  padding: 0;
+  inline-size: 100%;
   margin-block-end: cs.$space-scaled-xs;
-  background: cs.$color-border-divider-default;
+  margin-top: 7px;
+  border-top: 1px solid cs.$color-border-divider-default;
 }
diff --git a/src/internal/components/interfaces.ts b/src/internal/components/interfaces.ts
index 91bc5f5c..873c0ac5 100644
--- a/src/internal/components/interfaces.ts
+++ b/src/internal/components/interfaces.ts
@@ -7,6 +7,7 @@ export interface LegendItem {
   marker: React.ReactNode;
   visible: boolean;
   highlighted: boolean;
+  isSecondary?: boolean;
 }
 
 export type GetLegendTooltipContent = (props: GetLegendTooltipContentProps) => LegendTooltipContent;
diff --git a/src/test-utils/dom/internal/core.ts b/src/test-utils/dom/internal/core.ts
index 828fc93c..9861408e 100644
--- a/src/test-utils/dom/internal/core.ts
+++ b/src/test-utils/dom/internal/core.ts
@@ -22,7 +22,17 @@ export default class CoreChartWrapper extends BaseChartWrapper {
   }
 
   public findLegend(): null | CoreChartLegendWrapper {
-    return this.findComponent(`.${CoreChartLegendWrapper.rootSelector}`, CoreChartLegendWrapper);
+    return this.findComponent(
+      `.${CoreChartLegendWrapper.rootSelector}.${testClasses["legend-primary"]}`,
+      CoreChartLegendWrapper,
+    );
+  }
+
+  public findSecondaryLegend(): null | CoreChartLegendWrapper {
+    return this.findComponent(
+      `.${CoreChartLegendWrapper.rootSelector}.${testClasses["legend-secondary"]}`,
+      CoreChartLegendWrapper,
+    );
   }
 
   public findVerticalAxisTitle(): null | ElementWrapper {