3

I am using flot.js for charts with timestamp on the x-axis. As I will have quite a lot of ticks on these charts I am rotating them vertically so they do not overlap. This works fine, but the labels are centered on the tick and there is not enough room provided so they are cutoff.

example flot chart

I am NOT using the tickrotor plugin at tickrotor. I tried it and there were more problems than benefits. Instead I am using plain css which I found here on SO via rotate tick labels, however, in the post it appears they are not having the problem I am (perhaps there was some missing information there?).

Furthermore, I need to support IE8. The post mentioned above talks about using filter or -ms-filter, but fails to mention the css to accomplish that.

I was under the impression that even with the tick rotation it would correct the height accordingly, but that doesn't seem to the case. I also checked out flot's github and while they mention working on this feature it has still not been implemented.

I know a lot of people have the need to rotate the ticks, but I have not found anything which resembles my issue (centered and cutoff).

Any help or ideas would be appreciated.

#flot_chart div.xAxis div.tickLabel 
{
    transform: rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */
    -o-transform:rotate(-90deg); /* Opera */
    /*rotation-point:50% 50%;*/ /* CSS3 */
    /*rotation:270deg;*/ /* CSS3 */
}
Community
  • 1
  • 1
user756659
  • 3,372
  • 13
  • 55
  • 110
  • [This answer](http://stackoverflow.com/a/11900925/1355117) shows how to use `-ms-filter` and `filter` to rotate text with css in IE8. – mechenbier Jul 14 '14 at 17:32

3 Answers3

2

You are going to have lots of problems rotating the labels yourself. This is why the flot-tickrotor exists after all.

Flot sizes it's canvas within the placeholder div to leave enough room for the labels. By rotating them through CSS you are 1.) rotating around the center of the div (hence they go into the canvas area - hint you'll need to shift them down) and 2.) you are overflowing the div container (hint - you'll need to exapand the parent placeholder div). The example you link to works because the text is wrapped and about the same size rotated or not rotated.

Now, the flot-tickrotor deals with these by hooking the low level code of flot and resizing the canvas to make room for the rotated labels (it also gets rid of the label divs and draws the labels using the canvas - which helps with old IE).

So if you really want to pursue rotating the labels yourself, study the code to the plugin and have fun recreating it's functionality.

EDITS

Here's an attempt to use your CSS and make some on the fly adjustments so things will fit:

// push the labels down half their width
// while we are at it find longest label height
var longest = -1;
$('#flot_chart .xAxis .tickLabel').each(function(){
   var self = $(this);
   var width = self.width();
   self.css('top',parseInt(self.css('top')) + width/2 - 5);
    if (width > longest){
        longest = width;
    }
});

// now adjust the chart height so we don't overflow
$("#flot_chart").height($("#flot_chart").height() + longest - $('#flot_chart .xAxis .tickLabel').height() + 5);

See fiddle demonstration here.

Mark
  • 106,305
  • 20
  • 172
  • 230
  • If you read my original post I tried the plugin and it has LOTS of bugs. – user756659 Jul 15 '14 at 03:47
  • @user756659, I've used the plugin a bit in the past and it's functioned satisfactory. Perhaps you are asking the wrong question here? I hate to re-state the obvious, but if you could reliably rotate those labels with 7 lines of CSS, why would plugin exist? – Mark Jul 15 '14 at 03:55
  • and if the plugin functioned as stated I wouldn't be asking in the first place... I have since solved the issue another way until flot implements the feature in a future release. – user756659 Jul 15 '14 at 03:57
  • @user756659, perhaps I'm just being too grumpy. I hate to see people say things like *if the plugin functioned as stated* and it's got *LOTS of bugs*. The author of that plugin did it in his spare time to help people. Like all of flot, none of us get paid for it, we do it to give back and because we love to code. Regardless, see updated answer where I try and make your approach work. – Mark Jul 15 '14 at 04:35
  • I totally agree with you, but the plugin was simply not working properly for me which is why I came to find a solution. I ended up doing some logic on my end in the script to calculate an appropriate tick number so its labels will not overlap and kept it horizontal. Yes, it kind of stinks to have a years worth of daily data and tick label every two months, but I also made a hover function to show each points date and value as well. For now this is the best solution for me until it is added in as a feature. – user756659 Jul 15 '14 at 05:05
0

Give Padding Bottom and position relative to your main container.

And, give position absolute to your labels and give bottom 0px.

like,

.main-container { padding-bottom:50px; position:relative; }

and

#flot_chart div.xAxis div.tickLabel  
{
position:absolute;
bottom:0px;
transform: rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
/*rotation-point:50% 50%;*/ /* CSS3 */
/*rotation:270deg;*/ /* CSS3 */
}

I hope this will solve your issue.

If not, than please show your full code via Jsfiddle.

Husen
  • 955
  • 1
  • 6
  • 16
  • No, this does nothing. Not sure if you are familiar with flot or not, but this has nothing to do with my code other than the css I posted. – user756659 Jul 14 '14 at 04:38
0

This is a very old question still posting my experience. I too faced the same issue so I started a trial and error and found that if the max-width is set to a lower value it works fine. Below is the css that fixed the issue for me (in addition to the the one mentioned in the question). 300 is the max height of the graph I am using, the max width being set earlier was 71px

#flot-placeholder div.xAxis div.tickLabel  {    

    max-width : 30px !important;
    top: 300px !important;

}
someone
  • 104
  • 2
  • 10