Geek Answers Handbook

JQuery flot: chart with bright axis labels

I am trying to implement a diagram using a jQuery plugin. I have to show labels instead of numbers on the x axis, and these labels can be very long.

I can 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 unaesthetic blank space between the Y axis and its labels. See http://jsfiddle.net/QQkfy/2/

This is probably due to the fact that the shortcut is initially (i.e. preliminary CSS modifications) concentrated under the bars. Any ideas how I could overcome this problem?

+8
jquery flot
source share
2 answers

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 }
+6
source share

if you want to fix the problem with the y-axis label and don’t want the x-axis label to be wrapped, css style white-space: nowrap; will help.

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

+2
source share

More articles:


All Articles