I'm trying to implement a bar diagram with the jQuery-plugin flot. I have to show labels instead of numbers on the x axis, and these labels can be very long.

I am able to rotate the labels using CSS, so that they do not overlap:

.flot-x-axis div.flot-tick-label { 
    /* Rotate Axis Labels */
    transform: translateX(50%) rotate(20deg); /* CSS3 */
    transform-origin: 0 0;

    -ms-transform: translateX(50%) rotate(20deg); /* IE */
    -ms-transform-origin: 0 0;

    -moz-transform: translateX(50%) rotate(20deg); /* Firefox */
    -moz-transform-origin: 0 0;

    -webkit-transform: translateX(50%) rotate(20deg); /* Safari and Chrome */
    -webkit-transform-origin: 0 0;

    -o-transform: translateX(50%) rotate(20deg); /* Opera */
    -o-transform-origin: 0 0;
}

However, using this solution I get an unestetical empty space between the y-axis and its labels. See http://jsfiddle.net/QQkfy/2/

This is probably because the label are originally (i.e. pre-CSS modifications) centered under the bars. Any Ideas how could I overcome this problem?

jquery flot
Edit
Report