NVD3 Multi Bar Chart Labeling - d3.js

Question

I am trying to label multi bar chart. I am having issues with labeling. I hoping someone could help me.I am almost there, the labels are not aligned an i have no no idea why.
My chart is available here:
var chart_monthly;
var fundLabel_monthly;
var withSalesChargeFund_monthly;
var woutSalesChargeFund_monthly;
var indexPerformanceData_monthly;
var indexName_monthly;
var displaycase = true;
var yMin, yMax;
var width = 864;
var height = 380;
fundLabel_monthly = $("[id$='_hfAvgReturnFundLabel']").val(); // yields string, e.g. Genesis Fund, Class Trust - NBGEX
var keys = ['Class Trust', 'Class Institutional', 'Class Advisor', 'Class Investor', 'Class R3']
for (i = 0; i < keys.length; i++) {
var patt = new RegExp(keys[i]);
if (patt.test(fundLabel_monthly)) {
displaycase = false; // tells code to swap default to Without Sales Charge data set
break;
}
}
if (displaycase == false) {
$("[id$='monthly_saleschargetoggle']").hide();
withSalesChgFlag = false; //override what is passed in as for non A and C, there are no sales charges.
} else {
$("[id$='monthly_saleschargetoggle']").show();
}
indexName_monthly = $("[id$='_hfPrimaryBenchmarkName']").val();
if (indexName_monthly.length == 0 || indexName_monthly.length == 0)
return;
withSalesChargeFund_monthly = jQuery.parseJSON($("[id$='_hfWithSalesChargeFundMonthly']").val());
woutSalesChargeFund_monthly = jQuery.parseJSON($("[id$='_hfWoutSalesChargeFundMonthly']").val());
indexPerformanceData_monthly = jQuery.parseJSON($("[id$='_hfIndexPerformanceData']").val());
if (withSalesChargeFund_monthly.length == 0 || woutSalesChargeFund_monthly.length == 0 || indexPerformanceData_monthly.length == 0) {
return false;
}
var data = withSalesChgFlag ? getMonthlyDataWithSalesCharge() : getMonthlyDataWoutSalesChart();
nv.addGraph(function () {
chart_monthly = nv.models.multiBarChart()
.rotateLabels(0) //Angle to rotate x-axis labels.
.showControls(false) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.1) //Distance between each group of bars.
;
//create an array of all the y data points
var yArray = [];
for (i = 0; i < data[0].values.length; i++) {
yArray.push(data[0].values[i].y);
}
for (i = 0; i < data[1].values.length; i++) {
yArray.push(data[1].values[i].y);
}
var xArray = [];
for (i = 0; i < data[0].values.length; i++) {
xArray.push(data[0].values[i].x);
}
for (i = 0; i < data[1].values.length; i++) {
xArray.push(data[1].values[i].x);
}
yArray = yArray.sort(function(a,b){return a - b});
xArray = xArray.sort(function(a,b){return a - b});
yMax = d3.max(yArray);
yMin = d3.min(yArray);
yMax = Math.ceil(yMax+5);
yMin = Math.ceil(yMin-5);
var y = d3.scale.linear().range([height,0]).domain([yMin,yMax]);
var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.1).domain(xArray);
chart_monthly.yAxis.showMaxMin(false);
chart_monthly.xAxis.tickFormat(function (d) {
var index = d.replace(/^\d+_/, '');
if (index < data[0].values.length) {
var label = data[0].values[index].label;
if (typeof label !== 'undefined') {
return label.replace(/(\d\d)(\d\d)$/, '$2').replace(/<br.+$/, '');
} else {
return '/';
}
} else {
return '-';
}
});
chart_monthly.yAxis.tickFormat(function (d) {
return d3.format(",.2f")(d) + '%';
});
chart_monthly.forceY([yMin, yMax]);
debugger;
d3.select('#nd3Chart')
.datum(data)
.call(chart_monthly);
var yTextPadding = 20;
d3.select('#nd3Chart .nv-series-0').selectAll("rect").select("text")
.data(data[0].values)
.enter()
.append("text")
.text(function(d,i) {
console.log(d.y)
if ( d.y == 0.00000001)
return "N/A";
else
return (d.y + "%");
})
.attr('x', function(d) {
//return (x(d.x)+15)
debugger;
console.log(x(i));
return x(i)+x.rangeBand();
}
)
.attr('y', function(d)
{
if (d.y<0)
return (y(d.y)+30);
else
return height-y(d.y)+yTextPadding;
//if (d.y<0)
// return (y(d.y)-30);
//else
// return (y(d.y)-15);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black")
.attr("text-anchor", "middle")
;
//////////////////////////////////////////////////
d3.select('#nd3Chart .nv-series-1').selectAll("rect").select("text")
.data(data[1].values)
.enter()
.append("text")
.text(function(d,i) {
console.log(d.y)
if ( d.y == 0.00000001)
return "N/A";
else
return (d.y + "%");
})
.attr('x', function(d,i) {
return x(i)+x.rangeBand()/2;
})
.attr('y', function(d, i)
{
if (d.y<0)
return (y(d.y)+30);
else
return height-y(d.y)+yTextPadding;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black")
.attr("text-anchor", "middle")
;
nv.utils.windowResize(chart_monthly.update);
});
function getMonthlyDataWithSalesCharge() {
return [
{
"key": fundLabel_monthly,
"color": "#123a5f",
"values": withSalesChargeFund_monthly
},
{
"key": indexName_monthly,
"color": "#56a0d3",
"values": indexPerformanceData_monthly
}
];
}
function getMonthlyDataWoutSalesChart() {
return [
{
"key": fundLabel_monthly,
"color": "#123a5f",
"values": woutSalesChargeFund_monthly
},
{
"key": indexName_monthly,
"color": "#56a0d3",
"values": indexPerformanceData_monthly
}
];
}
Thanks
Alex