HumbleSoftware / Flotr2

Graphs and Charts for Canvas in JavaScript.

Home Page:http://www.humblesoftware.com/flotr2/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug: Incorrect y2axis title left margin

matbech opened this issue · comments

When you look at the small version of the "Advanced Titles Example" at http://www.humblesoftware.com/flotr2/index
you will notice that the label (y=x^3) is too close to the y2 axis. This is not as apparent in the full version of the example as there is enough space available for the label between two ticks. The problem is here:

   // Add y2 axis title
      if (a.y2.options.title && a.y2.used){
        style.textAlign = a.y2.options.titleAlign || 'left';
        style.textBaseline = 'middle';
        style.angle = Flotr.toRad(a.y2.options.titleAngle);
        style = Flotr.getBestTextAlign(style.angle, style);
-> incorrect style.textBaseline
        Flotr.drawText(
          ctx, a.y2.options.title,
          this.plotOffset.left + this.plotWidth + a.y2.maxLabel.width + 2 * margin, 
          this.plotOffset.top + this.plotHeight / 2,
          style
        );
      }

More specifically in the calculation of the textBaseline. For a 270 degree titleAngle the style.textBaseline should be bottom, for a 90 degree titleAngle it should be top. Right now the exact opposite is the case.

I have this issue too.
The y2 axis title is being written over the y2 axis tick values.

I have used the following HACK! It works for my particular use, but I haven't tested it more widely. Use at your own risk!

  • add new parameter to Flotr.getBestTextAlign to say whether this is a call for y2Axis (line #1562)
  getBestTextAlign: function(angle, style, isY2) {
    isY2 = isY2 || false;
    style = style || {textAlign: 'center', textBaseline: 'middle'};
    angle += Flotr.getTextAngleFromAlign(style);

    if (Math.abs(Math.cos(angle)) > 10e-3) 
      style.textAlign    = (Math.cos(angle) > 0 ? 'right' : 'left');

    if (Math.abs(Math.sin(angle)) > 10e-3){
        if(isY2){
            style.textBaseline = (Math.sin(angle) > 0 ? 'bottom' : 'top');
        }else{
            style.textBaseline = (Math.sin(angle) > 0 ? 'top' : 'bottom');
        }
    }
    return style;
  },
  • update just the y2 axis call (currently line #7126)
      // Add y2 axis title
      if (a.y2.options.title && a.y2.used){
        style.textAlign = a.y2.options.titleAlign || 'left';
        style.textBaseline = 'middle';
        style.angle = Flotr.toRad(a.y2.options.titleAngle);
        style = Flotr.getBestTextAlign(style.angle, style, true); /*** ',true' added ***/