radar js rules and radial chart background image centered

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id="myChart"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    window.myTooltipJsRule = function(p) {
      //console.log(p);
      return {
        'background-color': 'red',
        'text': 'value:' + p.value
      };
    }


    let chartConfig = {
      "graphset": [{
        "type": "radar",
        "plot": {
          "aspect": "rose",
          "stacked": true,
          "angle-space": 0,
          "-angle": 7.5,
          "background-color": "grey",
          "border-width": 2,
          "border-color": "black",
          "rules": [],
          "tooltip": {
            "jsRule": "myTooltipJsRule()"
          },
          "hover-state": {
            "background-image": "https://upload.wikimedia.org/wikipedia/commons/0/04/Map-icon-circle-ff9f9f.png",
            "background-repeat": "no-repeat",
            "background-position": "50% 50%",
            "background-color": "#f00",
            "border-width": 2,
            "border-color": "#0f0"
          },
          "-selection-mode": "multiple",
          "-selected-state": {
            "border-color": "pink",
            "border-width": 4
          },
          "-selected-marker": {
            "border-color": "pink"
          },
          "jsRule": "myJsRule()"
        },
        "scale-v": {
          "values": "0:4:1",
          "format": "%v",
          "item": {
            "font-color": "#000",
            "font-family": "Georgia",
            "font-size": 14,
            "background-color": "#f90",
            "font-weight": "bold",
            "font-style": "italic",
            "rules": [{
              "rule": "%scale-index === 0",
              "visible": false
            }]
          },
          "ref-line": {
            "line-color": "black"
          },
          "tick": {
            "line-color": "black",
            "placement": "cross"
          }
        },
        "scale-k": {
          "aspect": "circle",
          "values": "0:23:1",
          "tick": {
            "line-color": "black",
            "placement": "outer"
          },
          "item": {
            "rules": [{
              "rule": "%scale-index % 2 === 0",
              "visible": false
            }]
          }
        },
        "shapes": [{
            "backgroundImage": "gold-sun-32.jpg"
          },
          {
            "backgroundImage": "moon_3.png"
          }
        ],
        "series": [{
            "values": [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
            "data-text": 0
          },
          {
            "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            "data-text": 1
          },
          {
            "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            "data-text": 2
          },
          {
            "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            "data-text": 3
          },
          {
            "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            "data-text": 4
          }
        ]
      }]
    }







    // allows hoverstate to be behind scale items.
    zingchart.DEV.PLOTSHLAYER = true;

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: 400,
      width: '100%'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id="myChart"></div>
</body>

</html>

window.myTooltipJsRule = function(p) {
  //console.log(p);
  return {
    'background-color': 'red',
    'text': 'value:' + p.value
  };
}


let chartConfig = {
  "graphset": [{
    "type": "radar",
    "plot": {
      "aspect": "rose",
      "stacked": true,
      "angle-space": 0,
      "-angle": 7.5,
      "background-color": "grey",
      "border-width": 2,
      "border-color": "black",
      "rules": [],
      "tooltip": {
        "jsRule": "myTooltipJsRule()"
      },
      "hover-state": {
        "background-image": "https://upload.wikimedia.org/wikipedia/commons/0/04/Map-icon-circle-ff9f9f.png",
        "background-repeat": "no-repeat",
        "background-position": "50% 50%",
        "background-color": "#f00",
        "border-width": 2,
        "border-color": "#0f0"
      },
      "-selection-mode": "multiple",
      "-selected-state": {
        "border-color": "pink",
        "border-width": 4
      },
      "-selected-marker": {
        "border-color": "pink"
      },
      "jsRule": "myJsRule()"
    },
    "scale-v": {
      "values": "0:4:1",
      "format": "%v",
      "item": {
        "font-color": "#000",
        "font-family": "Georgia",
        "font-size": 14,
        "background-color": "#f90",
        "font-weight": "bold",
        "font-style": "italic",
        "rules": [{
          "rule": "%scale-index === 0",
          "visible": false
        }]
      },
      "ref-line": {
        "line-color": "black"
      },
      "tick": {
        "line-color": "black",
        "placement": "cross"
      }
    },
    "scale-k": {
      "aspect": "circle",
      "values": "0:23:1",
      "tick": {
        "line-color": "black",
        "placement": "outer"
      },
      "item": {
        "rules": [{
          "rule": "%scale-index % 2 === 0",
          "visible": false
        }]
      }
    },
    "shapes": [{
        "backgroundImage": "gold-sun-32.jpg"
      },
      {
        "backgroundImage": "moon_3.png"
      }
    ],
    "series": [{
        "values": [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
        "data-text": 0
      },
      {
        "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        "data-text": 1
      },
      {
        "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        "data-text": 2
      },
      {
        "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        "data-text": 3
      },
      {
        "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        "data-text": 4
      }
    ]
  }]
}







// allows hoverstate to be behind scale items.
zingchart.DEV.PLOTSHLAYER = true;

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: 400,
  width: '100%'
});