Highchart's Polar Chart: Apply Gradient Color on Intersecting Area Series

Question

I am trying to apply gradient color at the intersecting area of 2 series in a Highchart's polar chart in my React project. Here's my JSFiddle link: https://jsfiddle.net/pgkk/s29d51zt/604/

The expectation is that:

1. Area within the marker should be of same color as the color of each marker.
2. Have the outline of the colored series, slightly bent at the ends like "spline/areaspline" as in the attachment. Could you please help me, thanks in advance.

  "credits": {
    "enabled": false
  },
  "chart": {
    "polar": true,
    "height": 190,
    "width": 290,
    "marginBottom": -25,
    "style": {
      "fontWeight": 400,
      "fontSize": 11,
      "letterSpacing": "-0.06px",
      "lineHeight": "16px"
    }
  },
  "tooltip": {
    "enabled": false
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "min": 0,
    "categories": [
      "Category1",
      "Category2",
      "Category3"
    ],
    "tickmarkPlacement": "on",
    "lineWidth": 0,
    "labels": {
      "useHTML": true,
      "align": "center",
      "style": {
        "whiteSpace": "nowrap",
        "color": "#26415e",
        "fontSize": "12px"
      }
    }
  },
  "yAxis": {
    "gridLineInterpolation": "polygon",
    "min": 0,
    "max": 100,
    "showFirstLabel": false,
    "showLastLabel": true,
    "tickInterval": 25,
    "labels": {
      "align": "center",
      "y": 5,
      "x": 0,
      "style": {
        "color": "#333333",
        "fontSize": "10px"
      }
    }
  },
  "plotOptions": {
    "series": {
      "marker": {
        "radius": 2.5
      },
      "states": {
        "hover": {
          "enabled": false
        },
        "inactive": {
          "opacity": 1
        }
      }
    },
    "area": {
      "color": {
        "radialGradient": {
          "cx": 0.45,
          "cy": 0.5,
          "r": 1
        },
        "stops": [
          [
            0,
            "#DFA124"
          ],
          [
            0.25,
            "#AF9D3F"
          ],
          [
            0.5,
            "#5A9772"
          ],
          [
            1,
            "#229595"
          ]
        ]
      },
      "dataLabels": {
        "enabled": false
      },
    }
  },
  "series": [{
      "showInLegend": false,
      "data": [{
          "y": 100,
          "color": "#dce1e6"
        },
        {
          "y": 100,
          "color": "#dce1e6"
        },
        {
          "y": 100,
          "color": "#dce1e6"
        }
      ],
      "color": "transparent",
      "pointPlacement": "on",
      "marker": {
        "symbol": "circle"
      }
    },
    {
      "showInLegend": false,
      "data": [{
          "y": 36,
          "color": "#AF9D3F"
        },
        {
          "y": 64,
          "color": "#229595"
        },
        {
          "y": 33,
          "color": "#AF9D3F"
        }
      ],
      "pointPlacement": "on",
      "type": "area"
    }
  ]
});

Answer 1

1. Use multiple area series with overlapping radial gradients.

2. You can overwrite getConnectors method and change the hard-coded smoothing value.

    H.Series.prototype.getConnectors = function(...) {
        var ...
            smoothing = 10, // 1.5 by defaults
            ...
        ...
    };
   

---

Live demo: https://jsfiddle.net/BlackLabel/ob2xjkvs/