Highcharts Polar Chart: Multiple Pane Segment Colors

I'm trying to change the background color of each of the segments of a polar chart. It's easy to set a singular color for the background, but is it possible to set a different colo

Solution 1:

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].

Solution 2:

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

chart: {
polar:true,
events: {
  load:function() {
    varchart=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.columnhttps://api.highcharts.com/highcharts/yAxis.maxPadding