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.
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?