Highcharts Polar Chart customization

Question

I'am having problems with polar chart customization. I would like to move data labels by 45° to the right.

Here's the fiddle and this is the result I would like to get:

1. Is it possible to do that with Polar Chart (it has to be Polar Chart)?

2. Is this the right way to define label text?

   var categories = ['These', 'are', 'test', 'data'],
   count = 0;
   /* ... */
       labels: {
           formatter: function () {
               var value = categories[count];
   
               count++;
               if (count == 5) {
                   count = 0;
               }
   
               return value;
           }
       }
   

Answer 1

Getting the behaviour you want is a combination of two things:

• Use xAxis.categories instead of formatter: this is easier than creating a custom formatter. You can omit this step if you like depending on where you want the gridlines to be drawn.
• In your series options, set pointPlacement to between: By default, points will be placed facing 'North' by default, but with this option enabled, they'll be placed inbetween (for a graph with four values, it will put them at 45 degrees).

For example:

var categories = ['These', 'are', 'test', 'data'],
count = 0;

$('#container').highcharts({
    // ...        
    xAxis: {
        // ...
        categories: categories,
        // ...
    },
    // ...
    series: [{
        // ...
        pointPlacement: 'between',
        // ...
    }]
});