High chart formatter not working on Highchart API

Question

I am using Highchart library but very disappointed after using the same. Highchart call back function formatter not working for me for any of the chart. I am using Highchart API, It return image of the chart. but with wrong x-axis value. I want value to be "hello1, hello2, hello3 etc." but it only gives me number 1, 2, 3... Please help me.

Link Of Js Fiddle : https://jsfiddle.net/stjk38rz/

Code is

var categories = ['Conflict', 'Identity', 'Role', 'Attitude', 'Agility', 'Fairness'],
        count = 0;

    var options = {
        exporting: {
        url: 'https://export.highcharts.com/'
    },
        chart: {
            polar: true,
            renderTo: 'container', 
            zoomType: 'x'
        },
        pane: {
            startAngle: 45,
        },

        title: {
            text: 'Highcharts Polar Chart'
        },

        xAxis: {
            tickInterval: 1,
            min: 0,
            max: 6,
            labels: {
                enabled: true,
                formatter: function () {
                    if(this.value.toString().substring(0, 6) == 0)
                    {
                        return "hello1";
                    }
                    if(this.value.toString().substring(0, 6) == 1)
                    {
                        return "hello2";
                    }
          if(this.value.toString().substring(0, 6) == 2)
                    {
                        return "hello3";
                    }
          if(this.value.toString().substring(0, 6) == 3)
                    {
                        return "hello4";
                    }
          if(this.value.toString().substring(0, 6) == 4)
                    {
                        return "hello5";
                    }
          if(this.value.toString().substring(0, 6) == 5)
                    {
                        return "hello6";
                    }
                }
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + categories[Highcharts.numberFormat(this.x, 0) - 1] + '</b><br/>' + 'value: ' + this.y;
            }
        },

        yAxis: {
            labels: {
               enabled: false
           },
            min: 0,
            tickInterval: 10,
            tickPositions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            minorTickInterval: 0
        },

        plotOptions: {
            series: {
                pointStart: 0.5,
                pointInterval: 1
            },
            column: {
                pointPadding: 0,
                groupPadding: 0
            }
        },

        series: [{
            type: 'column',
            name: 'test data',
            data: [{
                y: 9.5,
                color: '#0FCCD9'
            }, {
                y: 1,
                color: '#ED1334'
            }, {
                y: 3,
                color: '#EDCC13'
            }, {
                y: 4,
                color: '#34ED13'
            }, {
                y: 5,
                color: '#34ED13'
            }, {
                y: 6,
                color: '#34ED13'
            }]
        }]
    };

var obj = {},
    exportUrl = options.exporting.url;
    obj.options = JSON.stringify(options);
    obj.type = 'image/png';
    obj.async = true;

    $.ajax({
        type: 'post',
        url: exportUrl,
        data: obj,
        success: function (data) {
            var imgContainer = $("#imgContainer");
            $('<img>').attr('src', exportUrl + data).attr('width', '250px').appendTo(imgContainer);
            $('<a>or Download Here</a>').attr('href', exportUrl + data).appendTo(imgContainer);

        }
    });

Answer 1

It appears that formatter isn't being called at all.

This could be because it's a polar chart or possibly there's some other conflict in your code overriding this?

As long as you only want text, you can pass the text in as categories, ie:

var categories = ['Conflict', 'Identity', 'Role', 'Attitude', 'Agility', 'Fairness']
xAxis: {
    categories: categories
}

Updated fiddle