I am building a Rails 3.2.11 app with Flot 0.8.1. I want to render my Flot charts in PDFs using Prawn. (I will Ajax the image data to the server using the .getCanvas and .toDataURL methods.) My Flot charts render in the browser just fine, with axis labels on the canvas thanks to the jquery.flot.canvas.js plugin.

The Problem

I am making barcharts with wide bars. I want my x-axis labels to be centered under the bars, not centered under the tick lines (where they look a little too far to the left).

Before I put my axes labels on the canvas (i.e., when using HTML labels with no jquery.flot.canvas.js plugin), I was styling them with SCSS like so,

.flot-x-axis {
  .tickLabel {
    font-size: 10px;
    padding-left: 16px;     // Nudges x-axis labels to the right
  }
}

Now, by rendering the labels on the canvas the above SCSS does not move the x-axis labels to the right. Oddly, the font-size: styling does work, but the padding-left: has no effect (also tried margin-left:). I can’t seem to find an appropriate selector to apply the padding.

I appreciate any help. Thanks!

Update

I am using the align: 'center' option in my code, but it does not seem to have any effect (i.e., same as if align: 'center' omitted). Please see, How to use Flot canvas plugin. FWIW, I am using time-based data.

It looks like I am having a similar problem to this, Flot bar chart month alignment issue

jsFiddle here. Note: Renders fine in FireFox, but not in Chrome.

Well, of course it works fine in my jsFiddle, but NOT in my code. Guess I need to sharpen up my eyes!

I am building a Rails 3.2.11 app with Flot 0.8.1. I want to render my Flot charts in PDFs using Prawn. (I will Ajax the image data to the server using the .getCanvas and .toDataURL methods.) My Flot charts render in the browser just fine, with axis labels on the canvas thanks to the jquery.flot.canvas.js plugin.

The Problem

I am making barcharts with wide bars. I want my x-axis labels to be centered under the bars, not centered under the tick lines (where they look a little too far to the left).

Before I put my axes labels on the canvas (i.e., when using HTML labels with no jquery.flot.canvas.js plugin), I was styling them with SCSS like so,

.flot-x-axis {
  .tickLabel {
    font-size: 10px;
    padding-left: 16px;     // Nudges x-axis labels to the right
  }
}

Now, by rendering the labels on the canvas the above SCSS does not move the x-axis labels to the right. Oddly, the font-size: styling does work, but the padding-left: has no effect (also tried margin-left:). I can’t seem to find an appropriate selector to apply the padding.

I appreciate any help. Thanks!

Update

I am using the align: 'center' option in my code, but it does not seem to have any effect (i.e., same as if align: 'center' omitted). Please see, How to use Flot canvas plugin. FWIW, I am using time-based data.

It looks like I am having a similar problem to this, Flot bar chart month alignment issue

jsFiddle here. Note: Renders fine in FireFox, but not in Chrome.

Well, of course it works fine in my jsFiddle, but NOT in my code. Guess I need to sharpen up my eyes!

• javascript
• css
• html5-canvas
• padding
• flot

• Can you create a jsFiddle that demonstrates your problem? – Mark Commented May 24, 2013 at 20:56

1 Answer 1

The Flot Canvas plugin only recognizes a subset of the things that you can do with CSS. Generally it recognizes anything relating to text style; font family, size, style, spacing and color. It doesn't recognize box-model rules like padding, margin, etc.

It sounds like what you really want is to use the bars align: center option.