Align titles for multiple axis in Highstock - highcharts

Question

I have 4 axis in a Highstock chart:
var p0 = [
[1538341200000,110.91],
[1538427600000,126.01],
[1538514000000,129.54],
[1538600400000,125.54]];
var p1 = [
[1538341200000,113.14],
[1538427600000,129.48],
[1538514000000,132.28],
[1538600400000,129.53],];
var t0 = [
[1538341200000,29.25],
[1538427600000,37.28],
[1538514000000,36.1],
[1538600400000,36.17],];
var t1 = [
[1538341200000,29.67],
[1538427600000,37.53],
[1538514000000,37.26],
[1538600400000,37.9],];
Highcharts.stockChart('container', {
chart: {
renderTo: "container"
},
title: {
text: "Sample test",
align: "center",
y: 14
},
legend: {
enabled: true,
align: "center",
verticalAlign: "top",
y: 40
},
xAxis: {
ordinal: false
},
yAxis: [
{
left: "-100%",
height: "18%",
top: "7%"
},
{
left: "-100%",
height: "18%",
top: "32%"
},
{
left: "-100%",
height: "18%",
top: "57%"
},
{
left: "-100%",
height: "18%",
top: "82%"
}
],
series: [
{
name: "Pressure 3",
data: p0,
yAxis: 0
},
{
name: "Pressure 4",
data: p1,
yAxis: 1
},
{
name: "Temperature 3",
data: t0,
yAxis: 2
},
{
name: "Temperature 4",
data: t1,
yAxis: 3
}
]
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 600px; height: 600px;"></div>
Now, I want to add titles to every axis on the top left corner, like this:
var p0 = [
[1538341200000,110.91],
[1538427600000,126.01],
[1538514000000,129.54],
[1538600400000,125.54]];
var p1 = [
[1538341200000,113.14],
[1538427600000,129.48],
[1538514000000,132.28],
[1538600400000,129.53],];
var t0 = [
[1538341200000,29.25],
[1538427600000,37.28],
[1538514000000,36.1],
[1538600400000,36.17],];
var t1 = [
[1538341200000,29.67],
[1538427600000,37.53],
[1538514000000,37.26],
[1538600400000,37.9],];
Highcharts.stockChart('container', {
chart: {
renderTo: "container"
},
title: {
text: "Sample test",
align: "center",
y: 14
},
legend: {
enabled: true,
align: "center",
verticalAlign: "top",
y: 40
},
xAxis: {
ordinal: false
},
yAxis: [
{
title: {
text: "Pressure 3",
rotation: 0,
y: -10
},
left: "-101%",
height: "18%",
top: "7%"
},
{
title: {
text: "Pressure 4",
rotation: 0,
y: -10
},
left: "-101%",
height: "18%",
top: "32%"
},
{
title: {
text: "Temperature 3",
rotation: 0,
y: -10
},
left: "-101%",
height: "18%",
top: "57%"
},
{
title: {
text: "Temperature 4",
rotation: 0,
y: -10
},
left: "-101%",
height: "18%",
top: "82%"
}
],
series: [
{
name: "Pressure 3",
data: p0,
yAxis: 0
},
{
name: "Pressure 4",
data: p1,
yAxis: 1
},
{
name: "Temperature 3",
data: t0,
yAxis: 2
},
{
name: "Temperature 4",
data: t1,
yAxis: 3
}
]
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="min-width: 400px; height: 600px;"></div>
As you can see every title breaks the next one adding some margin and "pushing" them to the right.
This is the expected result:
I tried many highstock properties and css styles to make them float to avoid them to push themselves, but nothing is working.
How to avoid this problem?

Answer 1

What you're trying to achieve is not a default behavior for axis title. The easiest way to plot titles as you expect is to make custom titles using Highcharts SVG renderer.
Each yAxis has properties top and left that we can use to plot custom titles at proper positions. Notice, that navigator is just an additional series so yAxis array will have one more element than you defined. Titles created by renderer are Highcharts.SVGElement. Each time the chart will be rendered you have to destroy the old ones and rendered them again (in new positions):
var titlesColl = [],
titles = [
"Pressure 3",
"Pressure 4",
"Temperature 3",
"Temperature 4"
];
chart: {
events: {
render: function() {
var chart = this,
yaxisColl = chart.yAxis,
offsetY = -4,
axis,
title,
i;
if (titlesColl.length) {
titlesColl.forEach(function(elem) {
elem.destroy();
});
titlesColl.length = 0;
}
for (i = 0; i < yaxisColl.length - 1; i++) {
axis = yaxisColl[i];
title = chart.renderer
.text(titles[i], axis.left, axis.top + offsetY)
.css({
'font-size': '10px'
})
.add();
titlesColl.push(title);
}
}
}
}
chart.events.render documentation
Demo:
https://jsfiddle.net/wchmiel/sxnyLhfb/