score:2

Accepted answer

To my knowledge there is no easy way to do this within the API.

I'll present a solution that utilizes the chart.renderer to draw a single color for each slice of your polar chart:

var colors = [ "pink", "yellow", "blue", "red", "green", "cyan", "teal", "indigo" ];    
var parts = 8;

for(var i = 0; i < parts; i++) {
    chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0], 
                       chart.plotTop + chart.yAxis[0].center[1], 
                       chart.yAxis[0].height, 
                       0, 
                       -Math.PI + (Math.PI/(parts/2) * i), 
                       -Math.PI + (Math.PI/(parts/2) * (i+1))).attr({
        fill: colors[i % colors.length],
        'stroke-width': 1,
        'opacity': 1
    }).add();
}

Click this JSFiddle link to see a live demonstration.

It uses the renderer.arc to draw each slice with the information from chart about center and axis height. The arcs are drawn using start and end angle, given in radians. The various slices can be colored using the colors array, and the number of slices can be controlled with the parts variable.

If there are more parts than colors it will start from the beginning of the colors array when it runs out of colors, using colors[i % colors.length].

score:0

You can add a fake column series with differently colored points and set yAxis.maxPadding to 0:

chart: {
polar: true,
events: {
  load: function() {
    var chart = this,
      max = chart.yAxis[0].max;
    chart.addSeries({
      type: 'column',
      data: [{
        y: max,
        color: 'rgba(255, 255, 0, 0.2)'
      }, {
        y: max,
        color: 'rgba(255, 0, 255, 0.2)'
      }, {
        y: max,
        color: 'rgba(0, 255, 255, 0.2)'
      }, {
        y: max,
        color: 'rgba(255, 0, 0, 0.2)'
      }, {
        y: max,
        color: 'rgba(0, 255, 0, 0.2)'
      }, {
        y: max,
        color: 'rgba(0, 0, 255, 0.2)'
      }, {
        y: max,
        color: 'rgba(130, 70, 150, 0.2)'
      }, {
        y: max,
        color: 'rgba(0, 0, 0, 0.2)'
      }],
      pointPadding: 0,
      groupPadding: 0,
      zIndex: 0,
      showInLegend: false,
      enableMouseTracking: false,
      animation: false
    })
  }
}
},

yAxis: {
  maxPadding: 0
},

jsFiddle: https://jsfiddle.net/BlackLabel/tsj9pomq

API Reference: https://api.highcharts.com/highcharts/series.column https://api.highcharts.com/highcharts/yAxis.maxPadding


Related Query

More Query from same tag