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

[yk.kim]

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]

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();
    }
  }