Highcharts display column category names on the xaxis - highcharts

Question

I have an issue displaying the column categories on the xaxis. I can get them to display in the "legend" and the "tooltips".
I have searched for a solution with no result. Can anyone see where I am going wrong.
My code:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Detractors','Passives','Promoters','Not used']
},
yAxis: {
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 30,
gridLineColor:'#ddd',
title: {
text: 'Percentage %',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
},
tooltip: {
formatter: function() {
return 'Guest responses:<br/> '+ this.y +'%<br/>'+ this.series.name +'<br/>';
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
colors: ['#FF0000','#FF6600','#009900','#333333'],
plotOptions: {
column: {
colorByPoint: false
},
series: {
cursor: 'pointer',
pointWidth: 20,
point: {
events: {
//click: function() {
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
//borderRadius: 5,
//backgroundColor: 'rgba(252, 255, 255, 255)',
//borderWidth: 1,
//borderColor: '#AAA',
y: -6,
format: '{y:.1f} %', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function() {
return '<b>Guest responses: '+ this.y +'<br/>'+ this.series.name +'%</b>';
}
}
}
},
credits: {
enabled: false
},
lang: {
noData: "No data"
},
noData: {
style: {
fontWeight: 'normal',
fontSize: '12px',
color: '#303030'
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: []
}
$.getJSON("../charts/1-2-4-reports_chart.php?TAG=<?php echo $_SESSION['SectionVar'];?>&From=<?php echo $_SESSION['StartDate'];?>&To=<?php echo $_SESSION['EndDate'];?>", function(json) {
options.xAxis.categories = json[0];
options.series[0] = json[0];
options.series[1] = json[1];
options.series[2] = json[2];
options.series[3] = json[3];
chart = new Highcharts.Chart(options);
});
});
Many thanks in advance for your time.