title: Highcharts spider chart with radial gradient fill not centered
body: <p>I have a spider web highcharts that is filled with radial gradient. When all edges have same value, the gradient is fine. But when it has random values, gradient doesn't fill right. It's off the center and becomes oval shaped.</p>
  
  <pre><code>var highChartsData = {
  chart: {
    polar: true,
    type: 'area',
    events: {
          load: function () {series = this.series[0];}
      }
  },
  xAxis: {
    categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
    tickmarkPlacement: 'on',
    lineWidth: 0
  
  },
  yAxis: {
    gridLineInterpolation: 'polygon',
    lineWidth: 0,
    min: 0,
    max: 12
  },
  tooltip: {
      enabled: false
  },
  title: {
      enabled: false
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  series: [{
    name: 'Planning',
    type: 'area',
    color: {
      radialGradient: {
          cx: 0.5,
        cy: 0.5,
        r: 1
      },
      stops: [
        [0, 'rgba(147, 255, 228, 0.8)'],
        [1, 'rgba(0, 105, 165,1)']
      ]
    },
    data: [15, 15, 15, 15, 15, 15, 15],
    pointPlacement: 'on'
  }]};
  </code></pre>
  
  <p>Check this link:
  <a href="http://jsfiddle.net/a6fmfq1a/44/" rel="nofollow noreferrer">http://jsfiddle.net/a6fmfq1a/44/</a></p>