Spider chart with circular bands

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {

  $('#container').highcharts({
    
      "chart": {
        "inverted": false,
        "backgroundColor": "rgba(255,255,255,0)",
        "reflow": false,
        "height": 707,
        "width": 1580,
        "plotBackgroundColor": "rgba(255,255,255,0)",
        "zoomType": "xy",
        "resetZoomButton": {
          "theme": {
            "fill": "#ffffff",
            "stroke": "#003ce1",
            "r": 0,
            "style": {
              "color": "#003ce1",
              "cursor": "pointer",
              "fontSize": "0.714rem",
              "fontFamily": "Lucida Sans Unicode"
            },
            "states": {
              "hover": {
                "fill": "#003ce1",
                "stroke": "#003ce1",
                "style": {
                  "color": "#ffffff",
                  "fontSize": "0.714rem",
                  "fontFamily": "Lucida Sans Unicode"
                }
              }
            }
          }
        },
        "polar": true
      },
      "title": {
        "text": null
      },
      "tooltip": {
        "enabled": true,
        "shared": false,
        "borderWidth": 1,
        "borderRadius": 1,
        "backgroundColor": "#ffffff",
        "style": {
          "color": "#000000",
          "fontSize": "1rem",
          "fontFamily": "Lucida Sans Unicode",
          "fontWeight": "normal",
          "fontStyle": "normal",
          "textDecoration": "none"
        },
        "crosshairs": [null, null]
      },
      "plotOptions": {
        "series": {
          "animation": null,
          "cursor": "pointer",
          "allowPointSelect": true,
          "showInLegend": true,
          "turboThreshold": 0,
          "stickyTracking": false,
          "events": {},
          "point": {
            "events": {}
          },
          "threshold": null
        }
      },
      "legend": {
        "enabled": true,
        "item": {},
        "borderWidth": 0,
        "layout": "horizontal",
       ...