How can I handle long text displayed inside a bar in a bar-chart?

Question

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?

Answer 1

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.

Answer 2

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.