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?

2 Answers 2


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

  • 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
    Commented Nov 5, 2012 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
    Commented Nov 5, 2012 at 16:53

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.

  • 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
    Commented Nov 6, 2012 at 22:20

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.