Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Word wrap in the Charting widgets #7184

pavelgruba opened this issue Mar 6, 2019 · 0 comments


None yet
1 participant
Copy link

commented Mar 6, 2019

The Problem

Long texts in textual elements (widget title, axis titles, point labels) are truncated with an ellipsis.

The Proposed Solution

We plan to implement word wrap for the following elements:

  • widget title
  • axis titles
  • legend title
  • texts of legend items
  • axis labels
  • tile labels in the TreeMap
  • point labels in the PieChart

Word wrap will be enabled for these elements unless you turn it off via a new wordWrap option...

wordWrap: 'normal' | 'break-word' | 'none'

...and the overflow option allows you to specify what to do with a text that overflows the element:

overflow: 'ellipsis' | 'clip' | 'hide' | 'none'

Implementation Details


If the legend is at a side of the chart and displays long texts without word wrap, it can occupy almost the entire container width and leave no room for the series and other chart elements.

We will add the width option that limits the legend's width and makes the legend wrap texts in its title and items.


Axis Titles and Labels

You will be able to align axis titles via the alignment option with values left, center, and right. The values are the same for horizontal and vertical axes.

Axis labels will be wrapped automatically to fit in between two side-by-side ticks. If they still cannot fit, overlappingBehavior is applied instead of word wrap.


Point Labels in the PieChart

Point labels in the PieChart will also have the alignment option with values left, center, and right.

Tile Labels in the TreeMap

The TreeMap already has an option (resolveLabelOverflow) that specifies whether to hide or truncate labels with ellipsis when they overflow the tile rectangle. We will deprecate resolveLabelOverflow in favor of the overflow option that provides more capabilities.

Tile labels in the TreeMap will have the alignment option as well.

We Need Your Feedback

Take a Quick Poll

Do you need word wrap for any other text element?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.