fix: dont render legend container on empty items

Author: jsilll

pages/03-core/empty-line.page.tsx

@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import Highcharts from "highcharts";
+import { omit } from "lodash";
+
+import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
+import { PageSettingsForm, useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+
+export default function () {
+  const { chartProps } = useChartSettings();
+  return (
+    <Page
+      title="Core chart demo"
+      subtitle="The page demonstrates the use of the core chart, including additional legend settings."
+      settings={
+        <PageSettingsForm
+          selectedSettings={["showLegend", "legendPosition", "showLegendTitle", "showLegendActions", "useFallback"]}
+        />
+      }
+    >
+      <CoreChart
+        {...omit(chartProps.cartesian, "ref")}
+        chartHeight={400}
+        highcharts={Highcharts}
+        options={{
+          xAxis: {
+            min: 1,
+            max: 50,
+          },
+          yAxis: {
+            min: 0,
+            max: 1,
+          },
+          series: [
+            {
+              data: [],
+              type: "line",
+              showInLegend: false,
+            },
+          ],
+        }}
+      />
+    </Page>
+  );
+}

src/core/chart-core.tsx

@@ -13,6 +13,7 @@ import Spinner from "@cloudscape-design/components/spinner";
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
 import * as Styles from "../internal/chart-styles";
+import { useSelector } from "../internal/utils/async-store";
 import { castArray } from "../internal/utils/utils";
 import { useChartAPI } from "./chart-api";
 import { ChartContainer } from "./chart-container";
@@ -84,6 +85,7 @@ export function InternalCoreChart({
   const mergedRootRef = useMergeRefs(rootRef, __internalRootRef);
   const rootProps = { ref: mergedRootRef, className: rootClassName, ...getDataAttributes(rest) };
   const legendPosition = legendOptions?.position ?? "bottom";
+  const emptyLegendItems = useSelector(api.legendStore, (s) => s.items.length === 0);
   const containerProps = {
     fitHeight,
     chartHeight,
@@ -302,7 +304,7 @@ export function InternalCoreChart({
         }}
         navigator={navigator}
         legend={
-          context.legendEnabled ? (
+          context.legendEnabled && !emptyLegendItems ? (
             <ChartLegend
               {...legendOptions}
               position={legendPosition}