How to center the yAxis title in Highcharts

Question

Is there any way to center the yAxis title, when it's displayed on top of the yAxis in Highcharts? This is a follow-up question ; haven't found a solution yet.

This is how it looks like in the moment:

yAxis: {
  title: {
    text: "Cumulative mean<br />annual mass balance<br />(mm w.e.)",
    align: "high",
    rotation: 0,
    x: 180,
    y: -30,
    useHTML: true,
    style: {
      align: "center",
      fontWeight: "bold"
    }
  },

I'd like to have these three centered. Tried it with useHTML and align. But doesn't work...

Here is a fiddle .

Thanks for any hints.

Answer 1

You can do this in CSS.

To horizontally center the y-axis, add these styles, and remove the x value:

.highcharts-axis {
  position: relative;
  left: 50% !important;
  transform: translateX(-50%);
}

To center-align its text, use this style:

.highcharts-axis {
  text-align: center;
}

Updated Fiddle