Highcharts series (column) names of x axis - highcharts

Question

I have a script that returns a chart (Highcharts) and it works fine apart from not displaying the names of the columns on the x axis. Can anyone see where I have gone wrong.
My Json:
[{"data":[30.95]},{"data":[2.38]},{"data":[66.67]}]
My script:
$(function () {
var colors = ['#FF0000','#FF9900','#009900'];
colorIterator = 0;
var chart;
$(document).ready(function() {
$.getJSON("../charts/1-2-4-reports_chart.php?TAG=<?php echo $_POST['SectionVar'];?>&From=<?php echo $StartDate;?>&To=<?php echo $EndDate;?>", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
height: 200,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5',
style: {
fontFamily: 'serif',
fontSize: '8px',
}
},
title: {
text: 'Net Promoter Score: <?php echo $_POST['SectionVar'];?>',
x: -20,
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'normal',
fontSize: '11px'
} //center
},
subtitle: {
text: '',
},
xAxis: {
categories: ['Detractors', 'Passives', 'Promoters'],
title: {
text: ''
}
},
yAxis: {
//reversedStacks: false,
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
plotLines: [{
color: '#808080'
}]
},
credits: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>Guest responses: '+ this.y +'<br/>'+ this.series.name +'</b><br/>Month:'+
this.x;
}
},
navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10,
x: -20
}
},
legend: {
enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1
},
colors: [
'#FF0000',
'#FF9900',
'#009900',
],
plotOptions: {
column: {
colorByPoint: false
},
series: {
type: 'column',
cursor: 'pointer',
pointWidth: 30,
point: {
events: {
//click: function() {
//location.href = "feedback-items_detractors_iframe.php?FromDate1=<?php echo $StartDate;?>&ToDate1=<?php echo $EndDate;?> target='iframe2'";
//}
}
},
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:.2f} %', // one decimal
y: -20, // 10 pixels down from the top
this.series.name
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
exporting: {
chartOptions: { // specific options for the exported image
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
fallbackToExportServer: false
},
series: json,
});
});
});
});
Many thanks in advance for your time.

Answer 1

You made some syntax errors in your code, fixed version below:
$(function() {
var colors = ['#FF0000', '#FF9900', '#009900'];
var colorIterator = 0;
var chart;
$(document).ready(function() {
const json = [{"data":[30.95]},{"data":[2.38]},{"data":[66.67]}]
setTimeout(function() {
chart = Highcharts.chart('container', {
chart: {
renderTo: 'container1',
type: 'column',
height: 200,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5',
style: {
fontFamily: 'serif',
fontSize: '8px',
}
},
title: {
text: '',
x: -20,
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'normal',
fontSize: '11px'
} //center
},
subtitle: {
text: '',
},
xAxis: {
categories: ['Detractors', 'Passives', 'Promoters'],
title: {
text: ''
}
},
yAxis: {
//reversedStacks: false,
endOnTick: false,
max: 101,
showFirstLabel: false,
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 2,
tickInterval: 10,
gridLineColor: '#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
plotLines: [{
color: '#808080'
}]
},
credits: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>Guest responses: ' + this.y + '<br/>' + this.series.name + '</b><br/>Month:' +
this.x;
}
},
navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10,
x: -20
}
},
legend: {
enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1
},
colors: [
'#FF0000',
'#FF9900',
'#009900',
],
plotOptions: {
column: {
colorByPoint: false
}
},
series: {
type: 'column',
cursor: 'pointer',
pointWidth: 30,
point: {
events: {
}
},
legendIndex: 0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
y: -6,
format: '{y:.2f} %', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
},
exporting: {
chartOptions: { // specific options for the exported image
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
fallbackToExportServer: false
},
series: json,
});
});
});
});
https://jsfiddle.net/0kjojak9/