jQuery flot: bar diagram with very long axis labels

Question

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?

Answer 1

Try changing the labelWidth for the x-axis. Se the Flots documentation: https://github.com/flot/flot/blob/master/API.md

xaxis: {
  tickLength: 0,
  ticks: ticks,
  min: -0.5, 
  max: 6.5,
  labelWidth: 30
}

Answer 2

if you want to fix the y axis label's issue and don't want to have x axis label wrapped, css style white-space: nowrap; will help.

See http://jsfiddle.net/vincentwang/Y4KTT/