Edit Question - KnowledgeHub

Title Body

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?

Tags (comma-separated) Cancel