Set the with of xAxis label to 50% on a Highcharts BarChart - highcharts

Question

Is there way to set the label of an Bar Chart to 50% of the charts width? I've tried this but it does not work:
xAxis: {
categories: [],
labels: {
formatter: function() {
var text = this.value;
return '<div class="js-ellipse" style="width:100%; overflow:hidden; text-overflow: ellipsis" title="' + text + '">' + text + '</div>';
},
style: {
width: '50%'
},
useHTML: true
}
},
So goal is to have labels on the left side of the bar chart that are 50% of the width of the whole chart container.

Answer 1

You have an option for that in the plotOptions :
plotOptions: {
bar: {
dataLabels: {
enabled: true,
inside: true
// ^^^^^^^^^^^^
}
}
},
The property inside :
For points with an extent, like columns, whether to align the data label inside the box or to the actual value point. Defaults to false in most cases, true in stacked columns.
And an example forked from the official documentation : http://jsfiddle.net/XXB9k/
EDIT :
There is another option to center the x labels (I don't know witch labels your are talking about), but there is a solution not far away from your code :
xAxis: {
...
labels: {
enabled: true,
x: this.width / 2,
}
}
An example : http://jsfiddle.net/QMPkh/
FINAL EDIT :
In fact you can simply use the width of the chart in the label formatter :
labels: {
enabled: true,
formatter: function() {
return '<div style="width:' + (this.axis.width/2) +'px">'+this.value+'</div>';
},
useHTML: true
}
An example to show the result : http://jsfiddle.net/QMPkh/2/

Answer 2

Unfortunately width in percent is not supported, only in pixels.