Y label sometimes collidea with X label - with solution

If you make a line chart that has longer than usual X labels and in which Y
label starts at the bottomm then the first Y label collides with the first
X label. I have attached the image that shows the problem.

To fix this issue, simply change this line:
-----
html.push('<div style="position:absolute;top:' + (this.plotOffset.top +
axis.d2p(tick.v) - axis.maxLabel.height/2) + 'px;left:0;width:' +
(this.plotOffset.left - options.grid.labelMargin) +
'px;text-align:right;'+(axis.options.color?('color:'+axis.options.color+';'):'')
+'"
class="flotr-grid-label">' + tick.label + '</div>');
-----
To:
-----
html.push('<div style="position:absolute;top:' + (this.plotOffset.top +
axis.d2p(tick.v) - axis.maxLabel.height/2) + 'px;left:0;width:' +
(this.plotOffset.left - options.grid.labelMargin) +
'px;text-align:right;'+(axis.options.color?('color:'+axis.options.color+';'):'')
+'"
class="flotr-grid-label flotr-grid-label-y">' + tick.label + '</div>');
-----

(we are adding new CSS class: flotr-grid-label-y)

You should also add the appropriate CSS classes to X, X2 and Y2.

Then we can specify negative margin-top in CSS, if we wish:
div.flotr-grid-label-y { margin-top: -4px; }

That was not possible before because all the labels had the same CSS class
(flotr-grid-label).

I would appreciate if the changes could be incorporated in trunk. AFAIK
there is no negative impact by these changes, but the solution lends itself
to other usages too. 

Thanks!

Original issue reported on code.google.com by anz...@gmail.com on 4 Jan 2010 at 11:03

Attachments:

youcef92 / flotr

Y label sometimes collidea with X label - with solution #112