Chartjs: Rotate Axis Title

Question

I have a Chart with two y Axis and i would like to give them both a title which just works fine. But the y axis title on the right side is rotated by 180°. I would like to undo this but cant find informations on how to do that in the documentation.

minRotation and maxRotation dont work.

Does someone now if its possible to rotate the axis title?

Answer 1

You can do it only one way. And it is that u change in chart.js library.

u should find this part which starts with

if (scaleLabel.display) { in Chart.js and put

var isRight = options.position === 'right';
rotation = isRight ? -0.5 * Math.PI : rotation;

as below

            if (scaleLabel.display) {
                // Draw the scale label
                var scaleLabelX;
                var scaleLabelY;
                var rotation = 0;

                if (isHorizontal) {
                    scaleLabelX = me.left + ((me.right - me.left) / 2); // midpoint of the width
                    scaleLabelY = options.position === 'bottom' ? me.bottom - (scaleLabelFontSize / 2) : me.top + (scaleLabelFontSize / 2);
                } else {
                    var isLeft = options.position === 'left';
                    scaleLabelX = isLeft ? me.left + (scaleLabelFontSize / 2) : me.right - (scaleLabelFontSize / 2);
                    scaleLabelY = me.top + ((me.bottom - me.top) / 2);
                    rotation = isLeft ? -0.5 * Math.PI : 0.5 * Math.PI;
                    var isRight = options.position === 'right';
                    rotation = isRight ? -0.5 * Math.PI : rotation;
                }

                context.save();
                context.translate(scaleLabelX, scaleLabelY);
                context.rotate(rotation);
                context.textAlign = 'center';
                context.textBaseline = 'middle';
                context.fillStyle = scaleLabelFontColor; // render in correct colour
                context.font = scaleLabelFont;
                context.fillText(scaleLabel.labelString, 0, 0);
                context.restore();
            }

as final result