Labels on bar chart missing - highcharts

Question

How do I go about ensuring that all of the labels for the bars are visible? This chart is showing every other label. Notice as well, that the numeric labels are missing on every other bar as well. Is this a font size issue, or something else?
http://jsfiddle.net/brookssh/a0xdsc3q/
var chart = new Highcharts.Chart({
chart: {
renderTo: "chartContainer",
defaultSeriesType: 'bar',
height: 595
},
title: {
text: '18 York Street Consumption (RankIt)',
style: {
color: '#484a4a',
fontSize: '22px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontWeight: 'bold'
}
},
subtitle: {
text: 'Saturday, August 15 2015 through Sunday, August 16 2015'
},
credits: {
enabled: false
},
yAxis: {
allowDecimals: false,
title: {
text: "Test",
style: {
color: '#0063A2',
fontFamily: 'Arial, Helvetica, sans-serif',
fontWeight: 'bold'
}
},
plotLines: [{
color: 'red', // Color value
value: null, // Value of where the line will appear
width: 2 // Width of the line
}],
min: 0
},
xAxis: [{
categories: ['9th Floor Total kWh', '9th Floor', '8th Floor Lighting Total kWh', '8th Floor', '7th Floor Lighting Total kWh', '7th Floor', '6th Floor Total kWh', '5th Floor Total kWh', '5th Floor', '4th Floor Total kWh', '4th Floor', '3rd Floor Total kWh', '3rd Floor', '26th Floor Total kWh', '26th Floor', '25th Floor Total kWh', '25th Floor', '24th Floor Total kWh', '24th Floor', '23rd Floor Total kWh', '23rd Floor', '22nd Floor Total kWh', '22nd Floor', '21st Floor Total kWh', '21st Floor', '20th Floor Total kWh', '20th Floor', '19th Floor Total kWh', '19th Floor', '18th Floor Total kWh', '18th Floor', '17th Floor Total kWh', '17th Floor', '16th Floor Total kWh', '16th Floor', '15th Floor Total kWh', '15th Floor', '14th Floor Total kWh', '14th Floor', '13th Floor Total kWh', '13th Floor', '12th Floor Total kWh', '12th Floor', '11th Floor Total kWh', '11th Floor', '10th Floor Total kWh', '10th Floor'],
title: {
},
type: 'category',
plotBands: [{
color: '#DDECFF',
from: 1439571600000,
to: 1439744400000
}],
plotLines: [{
color: 'grey', // Color value
dashStyle: "dash",
value: null, // Value of where the line will appear
width: 0 // Width of the line
}],
}, {
labels: {
rotation: -45,
enabled: false
},
lineWidth: 0,
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
colorByPoint: true
},
spline: {
enableMouseTracking: true,
animation: {
duration: 1500
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
}
}
},
tooltip: {
yDecimals: 2,
formatter: function () {
return tooltipFormat(this.x, null, this.y, yAxisTitle);
}
},
series: [{
data: [157, 169, 159, 173, 194, 203, 178, 144, 155, 411, 421, 275, 288, 266, 400, 214, 225, 142, 158, 112, 124, 114, 130, 112, 127, 134, 150, 107, 124, 143, 158, 85, 103, 99, 123, 174, 191, 327, 365, 221, 237, 241, 255, 310, 370, 133, 145],
dataLabels: {
enabled: true,
color: '#000',
style: {
fontSize: '10px',
verticalAlign: 'middle'
}
}
}]
});

Answer 1

You can use allowOverlap attribute of plotOptions.series.dataLabels to force the display of each labels :
plotOptions: {
series: {
colorByPoint: true,
dataLabels: {
allowOverlap: true
}
},
/* ... */
}
See your working JSFiddle here.