Charts: Add labelOverflow ellipsis option for bar chart axis labels #46656

chihsuan · 2026-01-19T07:21:25Z

Proposed changes:

Add labelOverflow: 'ellipsis' option to AxisOptions type for bar charts
Create TruncatedTickComponent that uses SVG foreignObject to render HTML-based labels with CSS text-overflow ellipsis
Labels are automatically truncated to fit the available bandwidth from the scale
Full label text is shown on hover via native title attribute tooltip
Add Storybook story demonstrating the feature with before/after comparison

Why a custom `TruncatedTickComponent`?

SVG <text> elements (used by visx for axis labels) don't support CSS text-overflow: ellipsis. There's no pure CSS solution for truncating SVG text with ellipsis.

Approaches considered:

tickLabelProps with scaleToFit: visx's <Text> component supports scaleToFit: 'shrink-only' which scales text to fit a width. However, it could cause labels to be too small to be readable.
Custom tickComponent: This approach gives us access to DataContext from @visx/xychart, which provides xScale and yScale. From the scale, we can call bandwidth() to get the exact pixel width available for each category label.

Solution:
We use tickComponent with SVG <foreignObject> to embed an HTML <div> inside SVG. This allows us to use CSS text-overflow: ellipsis for proper text truncation, while accessing the scale's bandwidth for dynamic width calculation.

// Usage
<BarChart
  data={data}
  options={{
    axis: {
      x: { labelOverflow: 'ellipsis' }
    }
  }}
/>

Screenshots:

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

N/A - This is a charts library enhancement.

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

Run Storybook: pnpm --filter @automattic/charts run storybook
Navigate to JS Packages / Charts Library / Charts / Bar Chart / LabelOverflowEllipsis
Verify:
- The first chart shows overlapping labels (default behavior)
- The second chart shows truncated labels with ellipsis
- Hovering over truncated labels shows the full text in a tooltip
- Test in safari

When bar charts are narrow, long categorical axis labels overlap and become unreadable. This adds a `labelOverflow: 'ellipsis'` option to axis configuration that truncates labels to fit the available bandwidth, with full text shown on hover via tooltip. Co-Authored-By: Claude Opus 4.5 <[email protected]>

github-actions · 2026-01-19T07:22:20Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the add/bar-chart-label-overflow-ellipsis branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/bar-chart-label-overflow-ellipsis

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2026-01-19T07:22:33Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

Copilot

Pull request overview

This PR adds a labelOverflow: 'ellipsis' option to the bar chart's axis configuration, enabling automatic truncation of long axis labels to fit within the available bandwidth. The feature uses SVG foreignObject to render HTML-based labels with CSS text-overflow ellipsis and displays the full text on hover via native tooltips.

Changes:

Add labelOverflow?: 'ellipsis' type to AxisOptions for bar chart axis configuration
Implement TruncatedTickComponent using SVG foreignObject with CSS ellipsis for label truncation
Integrate the component conditionally when labelOverflow: 'ellipsis' is specified
Add Storybook story demonstrating the feature with before/after comparison

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
projects/js-packages/charts/src/types.ts	Adds `labelOverflow` property to `AxisOptions` type with documentation
projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx	Implements the truncated tick component using foreignObject and CSS ellipsis
projects/js-packages/charts/src/charts/bar-chart/private/use-bar-chart-options.ts	Conditionally applies truncated tick component when labelOverflow is 'ellipsis'
projects/js-packages/charts/src/charts/bar-chart/private/index.ts	Exports the new truncated tick component
projects/js-packages/charts/src/charts/bar-chart/stories/index.stories.tsx	Adds Storybook story demonstrating the labelOverflow feature
projects/js-packages/charts/changelog/add-bar-chart-label-overflow-ellipsis	Adds changelog entry for the new feature

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

projects/js-packages/charts/src/charts/bar-chart/private/use-bar-chart-options.ts

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

- Fix textAlign mapping to handle 'middle' textAnchor (maps to 'center') - Fix xOffset calculation based on actual text alignment - Add JSDoc for MINI_TICK_LABEL_LENGTH constant - Only set title attribute when formattedValue has content (avoid empty tooltips) - Add aria-label for screen reader accessibility - Improve type safety by explicitly mapping compatible SVG text props to CSS Co-Authored-By: Claude Opus 4.5 <[email protected]>

jp-launch-control · 2026-01-19T07:51:04Z

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/js-packages/charts/src/charts/bar-chart/private/use-bar-chart-options.ts	23/25 (92.00%)	0.70%	0 💚

1 file is newly checked for coverage.

File	Coverage
projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx	26/27 (96.30%) 💚

Full summary · PHP report · JS report

- Extracted labelOverflow from axis options for both x and y axes. - Updated axis configuration to utilize extracted options for better readability and maintainability. - Ensured compatibility with the existing labelOverflow ellipsis feature. This change enhances the clarity of the axis configuration and prepares for future enhancements.

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.

projects/js-packages/charts/src/charts/bar-chart/private/index.ts

projects/js-packages/charts/changelog/add-bar-chart-label-overflow-ellipsis

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

projects/js-packages/charts/src/charts/bar-chart/private/use-bar-chart-options.ts

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

projects/js-packages/charts/changelog/add-bar-chart-label-overflow-ellipsis

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

- Renamed constant MINI_TICK_LABEL_LENGTH to MIN_TICK_LABEL_WIDTH for clarity. - Updated logic to use the new constant for determining maximum tick label width. - Introduced a comprehensive test suite for label overflow ellipsis functionality, ensuring proper rendering and accessibility features for long labels in bar charts. This update improves the readability of the code and ensures that long labels are handled gracefully in various chart orientations.

Add documentation explaining the trade-off when bandwidth is less than the minimum label width (20px): labels may overlap on very dense charts. Include mitigation strategies (numTicks, tickFormat, chart sizing). Co-Authored-By: Claude Opus 4.5 <[email protected]>

…tion Corrected punctuation in the changelog entry for the labelOverflow ellipsis feature, ensuring clarity in the description of the functionality that truncates long axis labels for bar charts.

Removed the export of TruncatedTickComponent from the bar chart index file, simplifying the module's interface and focusing on the essential exports for better maintainability.

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

projects/js-packages/charts/src/charts/bar-chart/test/bar-chart.test.tsx

- Adjusted the transform property to align HTML <div> elements within <foreignObject> to match SVG <text> vertical alignment. - Updated the position style to 'fixed' to enhance compatibility across browsers, particularly Safari. - Removed redundant transform logic to streamline the component's rendering. These changes enhance the visual consistency of tick labels in bar charts, ensuring they are displayed correctly across different environments.

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

projects/js-packages/charts/src/charts/bar-chart/stories/index.stories.tsx

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

projects/js-packages/charts/changelog/add-bar-chart-label-overflow-ellipsis

….stories.tsx Co-authored-by: Copilot <[email protected]>

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

projects/js-packages/charts/changelog/add-bar-chart-label-overflow-ellipsis

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

projects/js-packages/charts/src/charts/bar-chart/stories/index.stories.tsx

….stories.tsx Co-authored-by: Copilot <[email protected]>

…ated-tick-component.tsx Co-authored-by: Copilot <[email protected]>

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

- Pre-create TruncatedXTickComponent and TruncatedYTickComponent at module level to prevent component recreation on every render - Apply Safari position:fixed workaround only on Safari browsers using existing isSafari() utility - Update exports and imports to use memoized component instances Co-Authored-By: Claude Opus 4.5 <[email protected]>

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

projects/js-packages/charts/src/types.ts

…ated-tick-component.tsx Co-authored-by: Copilot <[email protected]>

Co-authored-by: Copilot <[email protected]>

…ated-tick-component.tsx Co-authored-by: Copilot <[email protected]>

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

projects/js-packages/charts/src/types.ts

dognose24

LGTM and works as described on both Chrome and Safari! 👍🏼

Chrome	Safari

dognose24 · 2026-01-20T08:46:40Z

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx

+
+	// Map SVG textAnchor to CSS textAlign
+	let textAlign: 'left' | 'right' | 'center' = 'center';
+	if ( textAnchor === 'start' ) {


Just curious: how do we set the textAnchor prop for a Bar Chart Label when testing?

Our interface doesn’t currently support the textAnchor prop, but you can apply it by customizing the bar chart:

<Axis { ...chartOptions.axis.x } tickLabelProps={ { textAnchor: 'start', } } />

Copilot AI review requested due to automatic review settings January 19, 2026 07:21

Copilot started reviewing on behalf of chihsuan January 19, 2026 07:21 View session

github-actions bot added [JS Package] Charts RNA labels Jan 19, 2026

github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Jan 19, 2026

Copilot AI reviewed Jan 19, 2026

View reviewed changes

chihsuan self-assigned this Jan 19, 2026

chihsuan and others added 2 commits January 19, 2026 15:34

Update changelog

be17496

Copilot AI review requested due to automatic review settings January 19, 2026 07:51

Copilot started reviewing on behalf of chihsuan January 19, 2026 07:52 View session

Copilot AI reviewed Jan 19, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings January 19, 2026 07:59

Copilot started reviewing on behalf of chihsuan January 19, 2026 07:59 View session

Copilot AI reviewed Jan 19, 2026

View reviewed changes

projects/js-packages/charts/changelog/add-bar-chart-label-overflow-ellipsis Show resolved Hide resolved

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx Outdated Show resolved Hide resolved

chihsuan and others added 2 commits January 19, 2026 16:06

chihsuan force-pushed the add/bar-chart-label-overflow-ellipsis branch from 1d32816 to ca007fa Compare January 19, 2026 08:11

Add minor update to changelog for bar chart labelOverflow ellipsis op…

e1b7e15

…tion Corrected punctuation in the changelog entry for the labelOverflow ellipsis feature, ensuring clarity in the description of the functionality that truncates long axis labels for bar charts.

Copilot AI review requested due to automatic review settings January 19, 2026 08:12

Refactor bar chart exports to streamline component usage

97aff7a

Removed the export of TruncatedTickComponent from the bar chart index file, simplifying the module's interface and focusing on the essential exports for better maintainability.

Copilot started reviewing on behalf of chihsuan January 19, 2026 08:13 View session

github-actions bot added the [Tests] Includes Tests label Jan 19, 2026

Copilot AI reviewed Jan 19, 2026

View reviewed changes

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx Outdated Show resolved Hide resolved

projects/js-packages/charts/src/charts/bar-chart/test/bar-chart.test.tsx Outdated Show resolved Hide resolved

chihsuan added [Status] Needs Review This PR is ready for review. [Type] Task labels Jan 19, 2026

Copilot AI reviewed Jan 19, 2026

View reviewed changes

Update projects/js-packages/charts/src/charts/bar-chart/stories/index…

aedc9c0

….stories.tsx Co-authored-by: Copilot <[email protected]>

Copilot AI review requested due to automatic review settings January 19, 2026 08:54

Copilot started reviewing on behalf of chihsuan January 19, 2026 08:55 View session

Copilot AI reviewed Jan 19, 2026

View reviewed changes

Update projects/js-packages/charts/src/charts/bar-chart/stories/index…

ed18e54

….stories.tsx Co-authored-by: Copilot <[email protected]>

Copilot AI review requested due to automatic review settings January 19, 2026 09:10

Update projects/js-packages/charts/src/charts/bar-chart/private/trunc…

37fe880

…ated-tick-component.tsx Co-authored-by: Copilot <[email protected]>

Copilot started reviewing on behalf of chihsuan January 19, 2026 09:11 View session

Update projects/js-packages/charts/src/charts/bar-chart/private/trunc…

affdc65

…ated-tick-component.tsx Co-authored-by: Copilot <[email protected]>

Copilot AI reviewed Jan 19, 2026

View reviewed changes

projects/js-packages/charts/src/charts/bar-chart/private/truncated-tick-component.tsx Outdated Show resolved Hide resolved

chihsuan and others added 2 commits January 19, 2026 17:19

Fix lint

8198ce7

Copilot AI review requested due to automatic review settings January 19, 2026 09:31

Copilot started reviewing on behalf of chihsuan January 19, 2026 09:32 View session

Copilot AI reviewed Jan 19, 2026

View reviewed changes

chihsuan requested review from a team January 19, 2026 09:35

Update projects/js-packages/charts/src/charts/bar-chart/private/trunc…

e61bb0e

…ated-tick-component.tsx Co-authored-by: Copilot <[email protected]>

Copilot AI review requested due to automatic review settings January 19, 2026 09:36

chihsuan and others added 2 commits January 19, 2026 17:36

Update projects/js-packages/charts/src/types.ts

6b4d738

Co-authored-by: Copilot <[email protected]>

Update projects/js-packages/charts/src/charts/bar-chart/private/trunc…

9f0c5a6

…ated-tick-component.tsx Co-authored-by: Copilot <[email protected]>

Copilot started reviewing on behalf of chihsuan January 19, 2026 09:36 View session

Copilot AI reviewed Jan 19, 2026

View reviewed changes

projects/js-packages/charts/src/types.ts Show resolved Hide resolved

dognose24 approved these changes Jan 20, 2026

View reviewed changes

chihsuan merged commit a871d06 into trunk Jan 20, 2026
91 checks passed

chihsuan deleted the add/bar-chart-label-overflow-ellipsis branch January 20, 2026 09:52

github-actions bot removed the [Status] Needs Review This PR is ready for review. label Jan 20, 2026

Charts: Add labelOverflow ellipsis option for bar chart axis labels #46656

Charts: Add labelOverflow ellipsis option for bar chart axis labels #46656

Uh oh!

Conversation

chihsuan commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Why a custom TruncatedTickComponent?

Screenshots:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Uh oh!

github-actions bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jp-launch-control bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

chihsuan commented Jan 19, 2026 •

edited

Loading

Why a custom `TruncatedTickComponent`?

github-actions bot commented Jan 19, 2026 •

edited

Loading

github-actions bot commented Jan 19, 2026 •

edited

Loading

jp-launch-control bot commented Jan 19, 2026 •

edited

Loading