[Solved]-Highcharts series (column) names of x axis-Highcharts

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/