HighCharts: How to aligned horizontal yAxis title

Question

I have 2 chart with different yAxis title. I need the titles to be horizontal and align to the right (on the left side of the Y line).

The title align worked only on the vertical centered. (and I need my titles to be in the middle)

I tried adding text-align to the style with no success.

yAxis: {
    "title": {
       "style": {
          "textAlign": "right"
       }
     }
}

http://jsfiddle.net/g7kUc/

Would love to hear ideas on how to work around this problem.

Answer 1

You're gonna like this, there is not documented option "textAlign" but not under style, but title property. For example: http://jsfiddle.net/g7kUc/1/

    yAxis: {
        "title": {
            "text": "test",
            "textAlign": "right"
        }
    }

Answer 2

One way is to just specify different offsets for the two axis labels:

offset:25

offset:40

http://jsfiddle.net/CTPe9/

I know it's a bit manual, but it has the right effect. If the labels change in length, you should be able to calculate the correct offset from the length of the string and the font used.

Another way is to not use the title at all. You have more contol over the labels:

 "labels": {
             "style": {
                 "fontWeight":"bold",
                "color": "#6D869F",
                "textAlign": "right"
            },
            "enabled": true,
            "align":"right",
            y:-60,
            formatter: function() {
                if (this.isFirst) {
                return "12345"; 
                } else {
                    return "";
                }
            }
        },

This fiddle shows it in action http://jsfiddle.net/zNHhh/.

It works by only showing one label (in the formatter function). This label is then aligned right, and moved using the 'y' parameter.