moving xaxis labels in flot

Trying to center the text label under a barchart under the xaxis in flot.

the original markup from flot looks like this:

<div style="position: a开发者_JAVA技巧bsolute; text-align: center; left: -20px; top: 185px; width: 79px;" class="tickLabel"><span class="chart-label">Lorem</span></div>

I want the resulting label markup looks like this:

<div style="position: absolute; text-align: center; left: 0px; top: 185px; width: 79px;" class="tickLabel"><span class="chart-label">Lorem</span></div>

This code has done the trick so far but I was wondering if there was a better way of aligning labels.

$.each($('.chart-label'),function(idx,el){
 var c = $(el);
 var value = c.parent().css('left');
 c.parent().css('left',parseInt(value)+20+'px');
});

I can't override the placement in css because the left attribute is inline.

You could use CSS alone:

.tickLabel .chart-label { padding-left:20px }

Or here's a minor improvement to yours:

$('.tickLabel').each(function(){
  var me = $(this);
  me.css('left',parseInt(me.css('left'))+20+'px');
});