Trying to draw poloar/area chart but Unable to get below output (attached image) using highcharts library. Radial gradient changes based on data but i need constant.

Looks like radial gradient center and other values getting dynamically calculated by need constant irrespective of data.

Tried arearange chart but unable to get expected output.

https://jsfiddle.net/koushlendra/o5dujm0z/561/

Highcharts.chart('container', {
  "credits": {
    "enabled": false
  },
  "chart": {
    "polar": true,
    "height": 250,
    "width": 250
  },
  "tooltip": {
    "enabled": false
  },
  "title": {
    "text": ""
  },

  "series": [{
      "showInLegend": false,
      "color": {
        radialGradient: {
          cx: 0.5,
          cy: 0.7,
          r: 0.5
        },
        "stops": [
          [0, "#DFA124"],
          [0.55, "#AF9D3F"],
          [0.75, "#5A9772"],
          [1, "#229595"]
        ],
        "opacity": 1
      },
      "data": [{
        y: 55
      }, {
        y: 23
      }, {
        y: 85
      }],
      marker: {
        enabled: false
      },
      "pointPlacement": "on",
      "opacity": 0.4,
      "type": 'area'
    }
  ],
  "xAxis": {
    "categories": ['Environment', 'Governance', 'Social'],
    "tickmarkPlacement": "on",
    "lineWidth": 0,
    "labels": {
      "align": "center"
    }
  },
  "yAxis": {
    "gridLineInterpolation": "polygon",
    "showLastLabel": true,
    "showFirstLabel": false,
    "min": 0,
    "max": 100,
    "tickInterval": 25,
    "labels": {
      "align": "center",
      y: 5,
      x: 0
    }
  },
  "plotOptions": {
    "series": {
      //color: 'red',
      //lineColor: 'red',
      "opacity": 0,
      "states": {
        "hover": {
          "enabled": false
        }
      }
    },
    "area": {
      "dataLabels": {
        "enabled": false
      },
      "dataLabels": {
        "enabled": false
      }
    }
  }
});