Row names are overlapping - highcharts

Question

I have created scatter plot http://jsfiddle.net/ashwinp/4aDQ2/1/
Here row names are are overlapping on each other?and point start drawing from middle of the row name.Why cant we start with the beginning of the row name?
Can i know how to solve this?
Here is the code
var InfluenceCnt=0;
var QResiduals=[];
var XLables=[];
var HottelingT2=[];
var EllipseChartData;
var EllipseShift;
QResiduals.push('0.5356899');
QResiduals.push('0.3356899');
QResiduals.push('0.6356899');
QResiduals.push('0.2356899');
QResiduals.push('0.8356899');
QResiduals.push('0.2356899');
QResiduals.push('0.4356899');
QResiduals.push('0.4356899');
QResiduals.push('0.4356899');
QResiduals.push('0.2356899');
QResiduals.push('0.2356899');
QResiduals.push('0.5356899');
QResiduals.push('0.8356899');
QResiduals.push('0.9356899');
QResiduals.push('0.5356899');
QResiduals.push('0.7356899');
QResiduals.push('0.2356899');
QResiduals.push('0.1356899');
QResiduals.push('0.0356899');
QResiduals.push('0.5356899');
QResiduals.push('0.8356899');
QResiduals.push('0.7356899');
HottelingT2.push('0.1')
HottelingT2.push('0.2');
HottelingT2.push('0.3');
HottelingT2.push('0.4');
HottelingT2.push('0.5');
HottelingT2.push('0.6');
HottelingT2.push('0.4')
HottelingT2.push('0.5');
HottelingT2.push('0.3');
HottelingT2.push('0.2');
HottelingT2.push('0.6');
HottelingT2.push('0.7');
HottelingT2.push('0.8')
HottelingT2.push('0.9');
HottelingT2.push('0.2');
HottelingT2.push('0.3');
HottelingT2.push('0.5');
HottelingT2.push('0.5');
HottelingT2.push('0.7')
HottelingT2.push('0.8');
HottelingT2.push('0.9');
HottelingT2.push('0.4');
HottelingT2.push('0.5');
HottelingT2.push('0.6');
XLables.push('abc')
XLables.push('bdef');
XLables.push('ceff');
XLables.push('ddds');
XLables.push('edf');
XLables.push('fdf');
XLables.push('abc')
XLables.push('bdef');
XLables.push('ceff');
XLables.push('dddsert');
XLables.push('edf');
XLables.push('fdf');
XLables.push('abcert')
XLables.push('bdefert');
XLables.push('ceffert');
XLables.push('retret');
XLables.push('edfert');
XLables.push('fdfret');
XLables.push('bdefert');
XLables.push('ceff');
XLables.push('ddds');
XLables.push('edf');
XLables.push('fdf');
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Ellipse Plot
EllipseChartData = new Highcharts.Chart({
chart: {
renderTo: 'EllipseContainer',
type: 'scatter',
marginRight: 10,
zoomType: 'xy',
events: {
load: function () {
// set up the updating of the chart each second
EllipseSeries = this.series[0];
setInterval(function () {
EllipseShift = EllipseSeries.data.length > 20;
if (!isNaN(QResiduals[InfluenceCnt]) && $.isNumeric(QResiduals[InfluenceCnt]) && typeof (QResiduals[InfluenceCnt]) != "undefined") { //alert(QResiduals[InfluenceCnt]);
var x = HottelingT2[InfluenceCnt], // current time
y = parseFloat(QResiduals[InfluenceCnt]);
InfluenceCnt++;
EllipseSeries.addPoint([x,y], true, EllipseShift);
}
}, 1000);
}
}
},
title: {
text: 'Ellipse Plot'
},
xAxis: {
title: {
text: 'Sample'
},
categories:XLables,
plotLines: [{
value:2.5,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: ''
}
}]
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0.4,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: ''
}
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>X: ' +
this.x + '<br/> Y: ' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Ellipse Plot',
data: []
}]
});
});
});
Thanks in advance.

Answer 1

You have limited width, so labels overlaps because "have no space" to contain "margin/padding". You can try to useHTML as true: http://api.highcharts.com/highcharts#xAxis.labels.useHTML and then use formatter() http://api.highcharts.com/highcharts#xAxis.labels.formatter with i.e
return '<div class="ownlabel">'+this.value+'</div>';
Then use your own css styles for defined "ownlabel".

Answer 2

The problem is that you are using categories, so Highcharts won't prevent any overlapping. I advice to use standard xAxis with formatter, take a look: http://jsfiddle.net/TEDBG/
xAxis: {
allowDecimals: false,
labels: {
formatter: function() {
return XLables[this.value];
}
}
}