Xaxis should get aligned at (0,0) in highcharts - highcharts

Question

I want to align xaxis line and axis labels at position (0,0) when data contains negative values.
ex. consider this fiddle example where negative values bar goes down and xaxis is set at (0,0)
http://jsfiddle.net/13d54mp8/2/
var YTD = 'YTD';
var yr1 = 'Year 1';
var yr3 = '*3 Year';
var yr5 = '*5 Year';
var sinceIN = '* Since Inception (5/31/2012)';
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
var xx = (-1) * (this.yAxis[0].translate(0, false, false));
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
},
title: {
text: 'Report Title',
style: {
fontSize: '18px',
color: '#1D5293',
fontWeight: 'bold'
},
},
subtitle: {
text: '(As of 6/30/2012)',
style: {
fontSize: '18px',
color: '#1D5293'
},
y: 40
},
xAxis: {
categories: [YTD, yr1, yr3, yr5, sinceIN],
lineColor: '#C1BADB',
tickWidth: 2,
},
yAxis: {
title: {
text: ''
},
lineColor: '#C1BADB',
lineWidth: 1,
labels: {
formatter: function() {
return this.value + '%';
}
},
gridLineWidth: 0,
tickWidth: 2
},
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ': ' + this.y + '%';
},
},
credits: {
enabled: false
},
series: [{
name: 'XXX Company Ltd. (Net)',
data: [3.02, -0.61, 2.03, 1.51, 5.35],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#1D5293'
},
{
name: 'XXX Relative Return Index (Gross)**',
data: [2.45, 0.85, 4.11, 0.73, 3.56],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#9E9E9E'
}
],
legend: {
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
x: 50,
y: 65,
borderWidth: 0,
margin: 30
},
});
});
});
Now I want to make work the same use case for inverted column chart where xaxis is on top and yaxis is at right side. check fiddle - http://jsfiddle.net/fa2e80qu/3/
var YTD = 'YTD'
var yr1 = 'Year 1'
var yr3 = '*3 Year'
var yr5 = '*5 Year'
var yr7 = '*7 Year'
var yr9 = '*9 Year'
var sinceIN = '* Since '
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
var xx = (0.34)* (this.yAxis[0].translate(0, false, false));
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
},
title: {
text: 'Report Title',
style: {
fontSize: '18px',
color: '#1D5293',
fontWeight: 'bold'
},
},
subtitle: {
text: '(As of 6/30/2012)',
style: {
fontSize: '18px',
color: '#1D5293'
},
y: 40
},
xAxis: {
categories: [YTD, yr1, yr3, yr5, yr7,yr9, sinceIN],
lineColor: '#C1BADB',
tickWidth: 2,
opposite:true
},
yAxis: {
opposite:true,
reversed:true,
title: {
text: ''
},
lineColor: '#C1BADB',
lineWidth: 1,
labels: {
formatter: function() {
return this.value + '%';
}
},
gridLineWidth: 0,
tickWidth: 2
},
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ': ' + this.y + '%';
},
},
credits: {
enabled: false
},
series: [
{
name: 'XXX Company Ltd. (Net)',
data: [3.02, -0.61, 2.03, 1.51, 5.35, -0.50,2.5],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#1D5293'},
{
name: 'XXX Relative Return Index (Gross)**',
data: [2.45, 0.85, 4.11, 0.73, 3.56,-0.5,1.6],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#9E9E9E'}
],
legend: {
enabled:false,
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
x: 50,
y: 65,
borderWidth: 0,
margin: 30
},
});
});
});
Expected behavior is to have xaxis line and labels aligns properly at position (0,0)

Answer 1

You can use the toPixels method:
chart: {
...,
events: {
load: function() {
var xx = this.yAxis[0].toPixels(0) - this.plotTop;
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/07rej16z/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels