First Label from category is not showing for Polar Chart

[chetanpingale]

Chart is skipping the first label from categories array.
Categories labels array and chart data is coming from API.

Below is my Code

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

let categories = []; //Default empty Categories
let count = 0;

 const options = {
        credits: {
            enabled: false
        },
        chart: {
            polar: true,
        },

        title: {
            text: '',
        },

        pane: {
            startAngle: 0,
            endAngle: 360
        },

        xAxis: {
            gridLineColor: '#5D698F',
            tickInterval: 45,
            min: 0,
            max: 360,
            labels: {
                formatter: function () {
                    if(categories[count]) {
                        const value = categories[count];
                        count++;
                        return value;
                    }
                },
                style: {
                    color: '#C0C9E3',
                    fontSize: '12px',
                }
            }

        },
        zAxis: {
            gridLineColor: '#5D698F',
        },
        legend: {
            enabled: false
        },

        yAxis: {
            min: 0
        },

        plotOptions: {
            series: {
                pointStart: 0,
                pointInterval: 45
            },
            column: {
                pointPadding: 0,
                groupPadding: 0
            }
        },
        series: [{
            type: 'column',
            name: 'Type',
            data:  [],
            pointPlacement: 'between'
        }]
    };

    if(props.data) {
        const chartData = props.data;

        options.series[0].data = chartData.series;
        count = 0;
       // API DATA -chartData.categories = ["Database", "Document", "PDF", "Spreadsheet", "Image", "CSV/JSON", "Other", "Skipped"]
        categories = chartData.categories; 
        options.xAxis.labels.formatter(); // Calling formatter function to set chart labels
    }

    return <HighchartsReact highcharts={Highcharts} options={options} />

First value (Database) from categories array is not showing.
Please find attached screenshot below for your reference.

[Basts]

@chetanpingale, thank you for contacting us.

I reproduced your case and seems that everything works fine, please take a look: https://stackblitz.com/edit/react-yerupp?file=index.js

[ppotaczek]

Closed due to inactivity.