Rotate Flot Tick Labels

flot bar chart xaxis label with rotated text by -90 alignment issue

Looking at your graph it looks like you are confused with flot terms .Those are tick labels not the axis label.You want to rotate your ticks this could be done without looking at your any other plugin by simply adding some css style

#CurrentYearlyTrendsBar 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 */
}

You can also make use of flot-tickrotor

Rotate Flot Tick Labels

You might have better luck just handling this with CSS instead of using the plug in:

#flotPlaceholder 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 */
}

Obviously change the angle to whatever it is you're trying to achieve. If you want to use this for the y-axis, just change the div.xAxis selector.

Result after testing in my own flot graph:

Organizing stick axis labels on Flot chart

Flot does not support rotated labels by default. You need to define some custom CSS (like in this answer) or use a plugin, for example tickrotor (which uses the xaxis.rotateTicks property instead of labelAngle).

jQuery flot with rotation plugin hides x axis labels

You can use the margin option to pad the sides of your chart to fix the cutoff axis labels:

"margin" is the space in pixels between the canvas edge and the grid,
which can be either a number or an object with individual margins for
each side, in the form:

margin: {
    top: top margin in pixels
    left: left margin in pixels
    bottom: bottom margin in pixels
    right: right margin in pixels
}

To fix the issue, I set the bottom margin to 10:

grid: {
    hoverable: true,
    clickable: false,
    margin: {
        top: 0,
        left: 0,
        bottom: 10,
        right: 0
    }
}

In this fiddle (no margin set), you can see that the second values in the axis labels are slightly cut-off on the bottom edge. In this fiddle, (set margin), the axis label text is not cut-off.

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

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.

jQuery flot: bar diagram with very long axis labels

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
}

Flot tick labels not displaying properly in .toDataURL() export

There were two issues here:

(1) First, the rotated tick label text was tiny. I was initially setting the tick label font with xaxis.font, which is ignored by jquery.flot.tickrotor.js. As stated in the plugin's README, declare the font in the xaxis.rotateTicksFont option instead.

(2) Second, when rotating tick labels, the vertical tick lines would disappear. As pointed out by Mark in the comments, this is due to a bug on on line 77 of jquery.flot.tickrotor.js: opts.ticks = [];. (A bug report has been filed.)

In the meantime, until the bug gets resolved, to fix the issue I have patched jquery.flot.js as follows:

/jquery.flot.js
Index: assets/javascript/lib/jquery/plugins/flot/jquery.flot.js
===================================================================
--- assets/javascript/lib/jquery/plugins/flot/jquery.flot.js    (revision 13829)
+++ assets/javascript/lib/jquery/plugins/flot/jquery.flot.js    (working copy)
@@ -2030,8 +2030,9 @@

             for (var j = 0; j < axes.length; ++j) {
                 var axis = axes[j], box = axis.box,
-                    t = axis.tickLength, x, y, xoff, yoff;
-                if (!axis.show || axis.ticks.length == 0)
+                    t = axis.tickLength, x, y, xoff, yoff,
+                    rTicks = axis.rotatedTicks || axis.ticks;
+                if (!axis.show || rTicks.length == 0)
                     continue;

                 ctx.lineWidth = 1;
@@ -2080,8 +2081,8 @@
                 ctx.strokeStyle = axis.options.tickColor;

                 ctx.beginPath();
-                for (i = 0; i < axis.ticks.length; ++i) {
-                    var v = axis.ticks[i].v;
+                for (i = 0; i < rTicks.length; ++i) {
+                    var v = rTicks[i].v;

                     xoff = yoff = 0;

Problem solved.

Flot graph tick label

You are probably using the canvas plugin, and setting canvas: true in your options. That forces flot to draw the labels on the canvas, rather than putting them where you are expecting (in the divs).

Flot graph changes tick label color with zoom plugin and rotate ticks on canvas

I didn't get a minimum example to work, I apologize, but I managed to solve my issue and I want to share it here just in case someone comes across.

It's a rather crude fix but in jquery.flot.tickrotor.js line 173 I added:

ctx.fillStyle = "#000000";

This will hard set the drawn text in the canvas to the color I wanted (black).

---

Related Topics