Ability to rotate axis titles

[NemanjaS2P]

Hello,

i would like to rotate the y axis tittle label but in the documentation there is nothing on this topic. The rotation is avalible only for axis ticks. Is there a way to rotate the label?

example in fiddle : https://jsfiddle.net/3yxwc0m1/

[etimberg]

There is no way to rotate the label

[NemanjaS2P]

Is there a chance this can be implemented in the future? Thank you

[LeeLenaleee]

Looks like the title is drawn on the canvas here, so you might be able to look at it and implement it yourself https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L1622

[wdmeest]

Would be nice if this could be implemented

[Yen0422]

This solution works perfectly! https://github.com/chartjs/Chart.js/issues/9572#issuecomment-904011008

[ggutierrez123]

Any news on this?

[En1kay]

I have got it working with a config option i called "flip". I just added some code to the drawTitle and titleArgs functions in the core.scale.js file. Will do a pull request after some testing. For now here is the code

  drawTitle() {
    const {ctx, options: {position, title, reverse, flip}} = this;

    if (!title.display) {
      return;
    }

    const font = toFont(title.font);
    const padding = toPadding(title.padding);
    const align = title.align;
    let offset = font.lineHeight / 2;

    if (position === 'bottom' || position === 'center' || isObject(position)) {
      offset += padding.bottom;
      if (isArray(title.text)) {
        offset += font.lineHeight * (title.text.length - 1);
      }
    } else {
      offset += padding.top;
    }

    const {titleX, titleY, maxWidth, rotation} = titleArgs(this, offset, position, align, title.flip);

    renderText(ctx, title.text, 0, 0, font, {
      color: title.color,
      maxWidth,
      rotation,
      textAlign: titleAlign(align, position, reverse),
      textBaseline: 'middle',
      translation: [titleX, titleY],
    });
  }

function titleArgs(scale, offset, position, align, flip) {
  const {top, left, bottom, right, chart} = scale;
  const {chartArea, scales} = chart;
  let rotation = 0;
  let maxWidth, titleX, titleY;
  const height = bottom - top;
  const width = right - left;

  if (scale.isHorizontal()) {
    titleX = _alignStartEnd(align, left, right);

    if (isObject(position)) {
      const positionAxisID = Object.keys(position)[0];
      const value = position[positionAxisID];
      titleY = scales[positionAxisID].getPixelForValue(value) + height - offset;
    } else if (position === 'center') {
      titleY = (chartArea.bottom + chartArea.top) / 2 + height - offset;
    } else {
      titleY = offsetFromEdge(scale, position, offset);
    }
    maxWidth = right - left;
  } else {
    if (isObject(position)) {
      const positionAxisID = Object.keys(position)[0];
      const value = position[positionAxisID];
      titleX = scales[positionAxisID].getPixelForValue(value) - width + offset;
    } else if (position === 'center') {
      titleX = (chartArea.left + chartArea.right) / 2 - width + offset;
    } else {
      titleX = offsetFromEdge(scale, position, offset);
    }
    titleY = _alignStartEnd(align, bottom, top);
    if (flip){
      rotation = position === 'left' ? - HALF_PI : -HALF_PI;
    }else{
      rotation = position === 'left' ? - HALF_PI : HALF_PI;
    }

  }
  return {titleX, titleY, maxWidth, rotation};
}