The secondary y axis position on highcharts not on proper Position - highcharts

Question

I am trying to create a chart using HighCharts where the secondary Y axis position is not coming correctly. Secondary axis keeps moving as data modify in series. This happens only in case of 3D charts.In the example below :
$(function () {
var title="Sales($ '000)";
$('#BatChart_CP1').highcharts({
chart: {
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 8,
depth: 60,
viewDistance: 35
}
},
title: {
text: ''
},
xAxis: [{
categories: ['Q1','Q2','Q3','Q4'],
lineColor: '#000',
min: 0,
lineWidth: 1,
labels: {
style: {
font: '12px Arial',
color: 'black'
}
}, min: 0,
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Sales($' + "'" + '000)',
style: {
font: '12px Arial',
color: 'black'
}
}, min: 0,
labels: {
style: {
font: '12px Arial',
color: 'black'
}
},
lineColor: '#000',
lineWidth: 1,
}, { // Secondary yAxis
title: {
text: '% of Franchise Sales',
style: {
font: '12px Arial',
color: 'black'
}
},
labels: {
formatter: function () {
return this.value + '%';
},
style: {
font: '12px Arial',
color: 'black'
}
},
offset:100,
min: 0,
lineColor: '#000',
lineWidth: 1,
opposite: true
}],
tooltip: {
shared: true
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
depth: 20,
dataLabels: {
enabled: true,
rotation: -90,
color: 'White',
align: 'right',
format: '{point.y}', // one decimal
y: 5, // 10 pixels down from the top
style: {
font: 'bold 13px Arial ',
textShadow: '0 0 0px black'
}
}
},
series: {
pointWidth: 35
}
},
series: [{ name: 'ACT ',type: 'column', data: [641,627,null,null], color: '#0070C0' },
{ name: 'BUD ',type: 'column', data: [128,88,60,82], color: 'rgb(230, 81, 0)' },
{ name: '% of Franchise Sales',type: 'spline',yAxis: 1,zIndex:999,data: [6.3,11.5,null,null],tooltip: {valueSuffix: '%'},color: '#b71c1c'}]
});
});
You can check on following Link

Answer 1

You can use x and y position for title and label on secondary axis, such as the following example:
// Secondary yAxis
title: {
text: '% of Sales',
style: {
font: '12px Arial',
color: 'black'
},
x:-120
},
labels: {
formatter: function () {
return this.value + '%';
},
style: {
font: '12px Arial',
color: 'black'
},
x:120
},
You can try it out here http://jsfiddle.net/fgg563cf/1/

Answer 2

You can use the offset parameter and align yAxis.
offset:100
Example: http://jsfiddle.net/kngx5zpt/1/