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