css

flot.js - position ticks vertically, but being cut off and centered  #angularjs #reactjs

  • I was under the impression that even with the tick rotation it would correct the height but that doesn’t seem to the case.
  • You are going to have lots of problems rotating the labels yourself.
  • So if you really want to pursue rotating the labels yourself, study the code to the plugin and have fun recreating it’s functionality.
  • Browse other questions tagged css flot or ask your own question .
  • @user756659, I’ve used the plugin a bit in the past and it’s functioned satisfactory.

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.

@ng_real_ninja: flot.js – position ticks vertically, but being cut off and centered #angularjs #reactjs

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.

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).

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

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

css

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.