Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm working on a project where one of the reports I'm displaying on screen is a type of Gantt Chart. The customer wants some information about the activity the bar represents displayed inside of the bar.

The chart itself has a start and end-date which means that sometimes, the bars are pretty short. If an activity spans from November 1 to November 31, but one of the activities is scheduled from October 20 to November 2, only 2 days worth of size are shown in the chart. This makes for a short bar and the text inside the bar is likely to go beyond the width of the bar.


download bmml source – Wireframes created with Balsamiq Mockups

Currently, I'm clipping the text itself. The chart has a White background, the bars can be any of a variety of colors. The text color is automatically adjusted either White or Black - whichever is determined to contrast best with the bar color based on luminescence. If the bar is a darker color - such as brown - then the text will be White. Even if I didn't clip the text, the text would basically clip itself because the user wouldn't be able to read the white-on-white text.

When the user hovers their mouse over the bar, I am outlining the bar with the color of the bar and then filling the rectangle White as well, changing the text to Black and showing all the text. This allows the user to view the clipped text if they need to, but still seems clunky.

I can play around with increasing the bar's height, but when the bars get small, fitting all the text on the bar can make very awkwardly tall bars with one word per line (assuming the words aren't larger than the width the bar still).

Does anyone have ideas how I could possible better the visual display of the text in the bars while maintaining readability?

share|improve this question
add comment

2 Answers

Have you thought about using tooltips? There are a lot of JavaScript plugins out there that make it super easy to show text when hovered over or clicked on. Check this plugin - http://craigsworks.com/projects/qtip/demos/content/attributes

Personally, I'm not a big fan of hover-overs because they are not very intuitive. The users don't know that hovering over something will cause an action, in this case displaying more details about the item they hovered over.

Click on the other hand is more helpful because you can indicate that the text is clickable by styling the element accordingly. For example, making the text look like a hyperlink or something.

But most of the tooltip plugins out there give you the option to display addition text to the user on both hover-over and click.

UPDATE: Maybe you could add a little icon right next to the bar which when clicked, can show the tooltip/tiny-popup that displays the text details. Check out the image below that visualizes this idea.

enter image description here

share|improve this answer
Actually, this is a WinForms application, so the JavaScript suggestions, while helpful, won't help in my particular case, though obviously using tool-tips in general isn't out of the question. –  Anthony Nov 5 '12 at 16:51
To help users discover that the bars can be hovered over, I apply a gradient at the end of the bar when the text is clipped. Not only does the clipped text help indicate that there is more text to display, but the gradient only being shown when text is clipped seems to provide enough indication for my current user-base. –  Anthony Nov 5 '12 at 16:53
add comment

I apologize in advance for asking the obvious question but have you considered not displaying the text on top of the bar?

There is a precedent for displaying the text in a Gantt chart elsewhere. Microsoft Project is the gold standard for project management software which means it contains a Gantt chart that has been under development and in use for many years. Their Gantt chart displays text to the right of the bar rather than on top of the bar - as does the image on the Wikipedia page referenced in the question.

share|improve this answer
Trust me, I would love this option, but the customer won't have it (for now, hopefully one day I can get him to reconsider). The issue he has is because they used to store this information in Excel and he wants to preserve the same overall look and feel the charts had in Excel. Mind you, they're not actually Excel charts in Excel, but charts made using cell background colors. /shiver –  Anthony Nov 6 '12 at 22:20
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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