Highcharts Radar Chart: Label outside the chart

I have created a radar chart with highcharts. The data labels are allways in the chart (in the border), but I want them to be outside.

In the best, they data labels (in my example Point 1-5) have a line to their pie (like pie-chart) and they are vertical located in middle of the pie. So I don´t know how to code the datalabels.

Here my fiddle: https://jsfiddle.net/ghu21x0e/

Highcharts.chart('container', {

        chart: {
            polar: true
        },

        title: {
            text: 'Goals'
        },

        subtitle: {
            text: 'Goals'
        },

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

        xAxis: {
            tickInterval: 72,
            min: 0,
            max: 360,
            labels: {
                format: false
            }
        },

        yAxis: {
            min: 0
        },

        plotOptions: {
            series: {
                pointStart: 0,
                pointInterval: 73,

                dataLabels: {
                    enabled: true,
                    crop: true,
                    overflow: 'none',
                    padding: 50,
                    verticalAlign: 'middle',
                    format: '{point.name}'

                }
            },
            column: {
                pointPadding: 0,
                groupPadding: 0,
                pointPlacement: 'between'
            }
        },

        series:
            [{
                type: 'column',
                name: 'Goal',
                data: [

                    {
                        name: 'Point 1',
                        y: 1
                    },
                    {
                        name: 'Point 2',
                        y: 2
                    },
                    {
                        name: 'Point 3',
                        y: 3
                    },
                    {
                        name: 'Point 4',
                        y: 4
                    },
                    {
                        name: 'Point 5',
                        y: 5
                    },

                ],
                pointPlacement: 'between'
            }]
    });

Solution

Unfortunately, the data labels connector is not supported in the polar chart. However, it can be done with additional pie series that is beneath the main one and linked to it. Check demo and code posted below.

Code:

Highcharts.chart('container', {
  chart: {
    polar: true
  },
  title: {
    text: 'Goals'
  },
  subtitle: {
    text: 'Goals'
  },
  pane: {
    startAngle: 0,
    endAngle: 360
  },
  xAxis: {
    tickInterval: 73,
    min: 0,
    labels: {
      format: false
    }
  },
  yAxis: {
    min: 0,
    max: 5
  },
  plotOptions: {
  	series: {
    	states: {
      	inactive: {
        	opacity: 1
        }
      }
    },
    column: {
      pointStart: 0,
      pointInterval: 73,
      pointPadding: 0,
      groupPadding: 0,
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    type: 'pie',
    animation: false,
    linkedTo: 'main',
    size: '5%',
    dataLabels: {
    	distance: 130
    },
    states: {
    	hover: {
      	enabled: false,
        brightness: 0
      }
    },
    data: [{
      name: 'Point 1',
      y: 1
    }, {
      name: 'Point 2',
      y: 1
    }, {
      name: 'Point 3',
      y: 1
    }, {
      name: 'Point 4',
      y: 1
    }, {
      name: 'Point 5',
      y: 1
    }]
  }, {
    type: 'column',
    name: 'Goal',
    id: 'main',
    colorByPoint: true,
    animation: false,
    states: {
    	hover: {
        brightness: 0
      }
    },
    data: [{
      name: 'Point 1',
      y: 1
    }, {
      name: 'Point 2',
      y: 2
    }, {
      name: 'Point 3',
      y: 3
    }, {
      name: 'Point 4',
      y: 4
    }, {
      name: 'Point 5',
      y: 5
    }],
    pointPlacement: 'between'
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<div id="container"></div>

Demo:

https://jsfiddle.net/BlackLabel/640jyoxp/

API reference: