How do I make my jQuery Flot x-axis rotated labels appear directly beneath the lines they represent?

Question

I’ve created a graph with Flot (using JQuery 1.11). Here is the fiddle — http://jsfiddle.net/y16h8LmL/3/ . I have this CSS in place for the x-axis labels …

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

This rotates the x-axis labels, as I like, however, each label does not appear directly beneath the vertical line it is meant to represent. How do I make the labels start directly under the line?

Answer 1

Just add in a translateX into your CSS:

placeholder div.xAxis div.tickLabel {
  transform: translateY(15px) translateX(15px) rotate(45deg);
  -ms-transform: translateY(15px) translateX(15px) rotate(45deg);
  /* IE 9 */
  -moz-transform: translateY(15px) translateX(15px) rotate(45deg);
  /* Firefox */
  -webkit-transform: translateY(15px) translateX(15px) rotate(45deg);
  /* Safari and Chrome */
  -o-transform: translateY(15px) translateX(15px) rotate(45deg);
  /* Opera */
  /*rotation-point:50% 50%;*/
  /* CSS3 */
  /*rotation:270deg;*/
  /* CSS3 */
}

Update fiddle.