Working with a client that uses D3 graphing. They are running into an issue when using a bar chart the label for the data entry is becoming extremely long (30+ characters) and rotating the text to 45degrees to make it fit.

Other than the obvious answer of char limit the labels has anyone found a good fix for this?

2 Answers 2


Consider using an effect similar to CSS overflow:ellipsis

Choose a maximum number of chars that work, and when labels are longer, truncate using the ellipsis.

If/when the user attempts to interact with the label to read more, show the full label in a tooltip (or similar) on hover.


a. Truncating the words if it surpasses a certain length

b. Using multiple lines in the label

c. Rotating the labels 90 degrees. This has the disadvantage of being harder to read, unless you...

d. ... swap the axis if possible. The vertical axis might be able to better accomodate longer labels and multi-line labels.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.