User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
