Highstocks chart multiple pane width and y axis alignment issue - charts

Question

I have issue with the width and alignment of y axis for each pane in my highstock multiple pane chart.
This issue is observed only if there are more than 2 panes in the highstocks chart.
What is the issue here?
$(function() {
var groupingUnits = [
[
'minute', // unit name
[60] // allowed multiples
],
[
'day', [1]],
[
'week', [1]],
[
'month', [1]]
];
Highcharts.setOptions({
global: {
useUTC: false
}
});
his_WscaleTranstek_chart = Highcharts.stockChart('container', {
plotOptions: {
series: {
dataGrouping: {
units: groupingUnits
},
marker: {
enabled: true,
symbol: 'cirlce',
states: {
select: {
fillColor: 'red',
lineWidth: 0,
radius: 5
}
}
},
cursor: 'pointer',
}
},
rangeSelector: {
selected: 2,
buttons: [{
type: 'minute',
count: 60,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
yAxis: [
{
opposite: false,
min: 0,
max: 50,
tickInterval: 5,
top:'0%',
height: '15%',
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 1 '
},
plotBands: [{
from: 0,
to: 16,
color: 'rgba(16, 180, 146, 0.56)'
}, {
from: 16,
to: 19,
color: 'rgba(0, 195, 206, 0.5)'
}, {
from: 19,
to: 25,
color: 'rgba(7, 235, 78, 0.68)'
}, {
from: 25,
to: 30,
color: 'rgba(225, 239, 6, 0.68)'
}, {
from: 30,
to: 40,
color: 'rgba(239, 134, 5, 0.5)'
}, {
from: 40,
to: 50,
color: 'rgba(251, 44, 6, 0.5)'
}
],
lineWidth: 2,
//maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
}, {
opposite: false,
min: 20,
max: 280,
tickInterval: 10,
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 2'
},
lineWidth: 1,
top: '17%',
height: '15%',
offset: 0,
//maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
},{
opposite: false,
min: 0,
max: 50,
tickInterval: 5,
top: '34%',
height: '15%',
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 3'
},
lineWidth: 2,
//maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
},
{
opposite: false,
min: 0,
max: 80,
tickInterval: 5,
top: '51%',
height: '15%',
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 4'
},
plotBands: [],
lineWidth: 2,
maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
},
{
opposite: false,
min: 10,
max: 70,
tickInterval: 5,
top: '68%',
height: '15%',
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 5'
},
plotBands: [],
lineWidth: 2,
maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
},{
opposite: false,
min: 0,
max: 8,
tickInterval: 5,
top: '85%',
height: '15%',
labels: {
align: 'right',
x: -3
},
title: {
text: 'y Axis 6'
},
plotBands: [],
lineWidth: 2,
maxPadding: 0,
endOnTick: false,
gridLineWidth: 0
}
],
title: {
text: 'Chart',
style: {
color: '#4e80b2'
}
},
legend: {
enabled: false,
itemStyle: {
'cursor': 'default'
}
},
series: [
{
type: 'line',
name: 'BMI',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + Math.round((point.y)) + ' </b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 0,
showInLegend: false
},
{
type: 'line',
name: 'WEIGHT',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y) + ' kg</b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 1,
showInLegend: false
},
{
type: 'line',
name: 'Fat %',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y) + ' kg</b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 2,
showInLegend: false
},
{
type: 'line',
name: 'Water %',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y) + ' kg</b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 3,
showInLegend: false
},
{
type: 'line',
name: 'Muscle mass',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y) + ' kg</b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 4,
showInLegend: false
},
{
type: 'line',
name: 'Bone Weight',
data: [15,15,15,15,15,15,15],
lineColor: "#777d7d",
"tooltip": {
pointFormatter: function () {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y) + ' kg</b><br/>';
}
},
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: "#777d7d"
},
yAxis: 5,
showInLegend: false
}
],
navigator: {
height: 30
}
}
)
});
jsfiddle

Answer 1

You should set yAxis.offset for the axes.
yAxis: [{
offset: 0,
example: https://jsfiddle.net/gahjh1uz/