I would like to inquire about the alignment method for the Axes Left, Bottom titles.

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
yk.kim
Newbie
Newbie
Posts: 4
Joined: Mon Mar 18, 2024 12:00 am

I would like to inquire about the alignment method for the Axes Left, Bottom titles.

Post by yk.kim » Wed May 22, 2024 12:32 am

I would like to inquire about the alignment method for the Axes Left, Bottom titles.
I would like to specify a title as shown below and align the left axis to the top and the bottom axis to the right.

Code: Select all

Chart1.axes.left.title.text = "Dist(km)";
Chart1.axes.left.title.rotation = 0;
//Chart1.axes.left.title.align???
Chart1.axes.bottom.title.text = "Time (sec)";
Chart1.axes.bottom.title.rotation = 0;
//Chart1.axes.bottom.title.align????
thank you.

Yeray
Site Admin
Site Admin
Posts: 9552
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: I would like to inquire about the alignment method for the Axes Left, Bottom titles.

Post by Yeray » Tue May 28, 2024 10:50 am

Hello,

You could override the axes title.drawIt function as follows:

Code: Select all

  Chart1.axes.left.title.text = "Left axis title";
  Chart1.axes.left.title.margins.right = 0;

  Chart1.axes.left.title.drawIt=function(textAlign, x,y, rotation) {
    const axis = this.chart.axes.left;
    y = axis.startPos;
    y += this.bounds.width;

    this.format.font.textAlign = "right";

    if (rotation === 0) {
      this.position.x=x;
      this.position.y=y;
      this.forceDraw();
    }
    else {
      var ctx = this.chart.ctx;
      ctx.save();

      ctx.translate(x,y);
      ctx.rotate(-rotation * Math.PI/180);

      this.position.x=0;
      this.position.y=0;

      this.forceDraw();
      ctx.restore();
    }
  }

  Chart1.axes.bottom.title.text = "Bottom axis title";
  Chart1.axes.bottom.title.margins.right = 0;

  Chart1.axes.bottom.title.drawIt=function(textAlign, x,y, rotation) {
  const axis = this.chart.axes.bottom;
  x = axis.endPos;
  x -= this.bounds.width;

  this.format.font.textAlign = "right";

  if (rotation === 0) {
      this.position.x=x;
      this.position.y=y;
      this.forceDraw();
    }
    else {
      var ctx = this.chart.ctx;
      ctx.save();

      ctx.translate(x,y);
      ctx.rotate(-rotation * Math.PI/180);

      this.position.x=0;
      this.position.y=0;

      this.forceDraw();
      ctx.restore();
    }
  }
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply