Skip to content

feat: Stack labels in Cartesian Charts#207

Draft
gloncakv wants to merge 2 commits intocloudscape-design:mainfrom
gloncakv:stack-labels-feature
Draft

feat: Stack labels in Cartesian Charts#207
gloncakv wants to merge 2 commits intocloudscape-design:mainfrom
gloncakv:stack-labels-feature

Conversation

@gloncakv
Copy link
Copy Markdown

Description

The Highcharts library powering Cloudscape Cartesian charts supports stack labels. Stack labels show the total value for each bar in a stacked column or bar chart. This is also useful when the y-axis displays different units than the data series, for example, percentage vs. actual count.

From Highcharts documentation:

The stack labels show the total value for each bar in a stacked column or bar chart. The label will be placed on top of positive columns and below negative columns. In case of an inverted column chart or a bar chart the label is placed to the right of positive bars and to the left of negative bars.

This change follows the existing pattern for enabling Highcharts features. Analogous to Highcharts, stackLabels properties are passed via the yAxis. This change only exposes the enabled property of stackLabels. Stack labels inherit the y-axis styles (font family, size, etc.).

Stack labels require stacking to be set to "normal".

Related links, issue #, if available: n/a

How has this been tested?

  • added unit tests
  • added a page to verify the visuals pages/06-visual-tests/column-stack-labels.page.tsx
Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

This change doesn't handle URLs.

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@pan-kot pan-kot changed the title Stack labels in Cartesian Charts feat: Stack labels in Cartesian Charts Apr 13, 2026

import ColumnLayout from "@cloudscape-design/components/column-layout";

import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use the public CartesianChart here to ensure the props are propagated correctly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants