feat: Stack labels in Cartesian Charts

pages/06-visual-tests/column-stack-labels.page.tsx

@@ -0,0 +1,93 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import ColumnLayout from "@cloudscape-design/components/column-layout";
+
+import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
+import { dateFormatter } from "../common/formatters";
+import { useChartSettings } from "../common/page-settings";
+import { Page, PageSection } from "../common/templates";
+
+export default function () {
+  return (
+    <Page title="Column series with stack labels">
+      <ColumnLayout columns={3}>
+        <PageSection>
+          <Chart type="single" />
+        </PageSection>
+        <PageSection>
+          <Chart type="stacked" />
+        </PageSection>
+        <PageSection>
+          <Chart type="grouped" />
+        </PageSection>
+      </ColumnLayout>
+    </Page>
+  );
+}
+
+const domain = [
+  new Date(1601071200000),
+  new Date(1601078400000),
+  new Date(1601085600000),
+  new Date(1601092800000),
+  new Date(1601100000000),
+];
+
+function Chart({ type }: { type: "single" | "stacked" | "grouped" }) {
+  const { chartProps } = useChartSettings();
+  return (
+    <CoreChart
+      highcharts={chartProps.cartesian.highcharts}
+      ariaLabel="Bar chart"
+      legend={{ enabled: false }}
+      tooltip={{ placement: "outside" }}
+      options={{
+        plotOptions: { series: { stacking: type !== "grouped" ? "normal" : undefined } },
+        series: [
+          {
+            id: "Severe",
+            name: "Severe",
+            type: "column" as const,
+            data: [22, 28, 25, 13, 28],
+          },
+          {
+            name: "Moderate",
+            type: "column" as const,
+            data: [18, 21, 22, 0, 1],
+          },
+          {
+            name: "Low",
+            type: "column" as const,
+            data: [17, 19, 18, 17, 15],
+          },
+          {
+            name: "Unclassified",
+            type: "column" as const,
+            data: [24, 18, 16, 14, 16],
+          },
+        ].slice(0, type === "single" ? 1 : 4),
+        xAxis: [
+          {
+            type: "category",
+            title: { text: "Time (UTC)" },
+            categories: domain.map((date) => dateFormatter(date.getTime())),
+          },
+        ],
+        yAxis: [{ title: { text: "Error count" }, stackLabels: { enabled: true } }],
+      }}
+      getItemOptions={(itemId) => ({
+        status: itemId === "Severe" ? "warning" : "default",
+      })}
+      callback={(api) => {
+        setTimeout(() => {
+          if (api.chart.series) {
+            const seriesIndex = Math.min(api.chart.series.length - 1, 1);
+            const point = api.chart.series[seriesIndex].data.find((p) => p.x === 2)!;
+            api.highlightChartPoint(point);
+          }
+        }, 0);
+      }}
+    />
+  );
+}

src/cartesian-chart/index.tsx

@@ -265,7 +265,7 @@ function transformYAxisOptions(
 }
 
 function transformSingleYAxisOptions<T extends CartesianChartProps.YAxisOptions>(axis?: T): T {
-  return { ...transformAxisOptions(axis), reversedStacks: axis?.reversedStacks } as T;
+  return { ...transformAxisOptions(axis), reversedStacks: axis?.reversedStacks, stackLabels: axis?.stackLabels } as T;
 }
 
 function transformSizeAxisOptions(

src/cartesian-chart/interfaces.ts

@@ -178,6 +178,7 @@ export namespace CartesianChartProps {
 
   export interface YAxisOptions extends AxisOptions {
     reversedStacks?: boolean;
+    stackLabels?: { enabled?: boolean };
   }
 
   export interface YAxisWithId extends YAxisOptions {

src/core/__tests__/chart-core-options.test.tsx

@@ -143,6 +143,34 @@ describe("CoreChart: options", () => {
     );
   });
 
+  test("propagates yAxis stackLabels", () => {
+    const xAxis = {
+      lineWidth: 99,
+      title: { style: { color: "axis-color" }, text: "x-axis" },
+      labels: { style: { color: "label-color" } },
+      custom: "custom",
+    } as const;
+    const stackLabels = { enabled: true };
+    const yAxis = {
+      lineWidth: 99,
+      title: { style: { color: "axis-color" }, text: "y-axis" },
+      labels: { style: { color: "label-color" } },
+      custom: "custom",
+      stackLabels: stackLabels,
+    } as const;
+
+    renderChart({ highcharts, options: { xAxis, yAxis } });
+
+    expect(HighchartsReact).toHaveBeenCalledWith(
+      objectContainingDeep({
+        options: {
+          yAxis: expect.arrayContaining([objectContainingDeep({ stackLabels })]),
+        },
+      }),
+      expect.anything(),
+    );
+  });
+
   test("propagates plotOptions.series", () => {
     const plotOptions = {
       custom: "custom",

src/core/chart-core.tsx

@@ -245,6 +245,7 @@ export function InternalCoreChart({
       // 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,
+      stackLabels: { ...yAxisOptions.stackLabels, style: yAxisOptions.labels?.style },
     })),
     plotOptions: {
       ...options.plotOptions,