Intentando dibujar un gráfico de poloar/área pero no se puede obtener el resultado inferior (imagen adjunta) usando la biblioteca de gráficos altos. Cambios de gradiente radial basados en datos pero necesito constante.

Parece que el centro de gradiente radial y otros valores se calculan dinámicamente por necesidad constante independientemente de los datos.

Intenté el gráfico de rango de áreas pero no pude obtener el resultado esperado.

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 } } } });