DY-graph xaxis range labeling - polymer

Question

I am trying to label xaxis lable range in uniform format. currently I am getting the xaxis labels as below.
But I want this to be represented in format like "20:00 21:00 23:00 'next day Date' 01:00 03:00 ..." and so on based on data available.
Also I want to display mouse over xaxis value in legend. What code change I need to do as part of this change ?
Here is the code snippet
new Dygraph(
this.$.chart,
data,
{
title: this.chartData.response.chartDataSet.xAxisHeading,
labels: data_labels,
axisLabelWidth: 60,
ylabel: this.chartData.response.chartDataSet.yAxisHeading,
height: 300,
width: setWidth,
hideOverlayOnMouseOut: false,
legend: 'follow',
fillGraph: true,
pixelsPerLabel: pixelsPerLabelXaxis,
legendFormatter: legendFormatter,
axes: {
x: {
axisLabelFormatter: function(d) {
this.value = in_data.chartDataSet.xCoordinates[d];
if(this.value!==undefined){
if(historicalPeriod === 21 || historicalPeriod === 22 || historicalPeriod === 23){
return moment(this.value, 'MM-DD-YYYY_HH:mm:ss').format('DD - MMM');
}
else if(historicalPeriod === 24){
return moment(this.value, 'MM-DD-YYYY').format('MMM-YYYY');
}else{
return moment(this.value, 'HH:mm:ss').format('HH:mm');
}
}
return in_data.chartDataSet.xCoordinates[d];
}
}
},
}
);