Boxplot - legend using shapes

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src='http://cdn.zingchart.com/zingchart.min.js'></script>
  <script nonce="undefined">
    zingchart.MODULESDIR = 'http://cdn.zingchart.com/modules/'
  </script>

  <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"];
    var myJson = {
      "type": "boxplot",
      "vertical-labels": true,
      "scale-x": {
        "labels": []
      },
      "shapes": [{
          "type": "circle",
          "size": 5,
          "x": "10%",
          "y": 20,
          "background-color": "#89B92D",
          "label": {
            "width": 60,
            "text": "Male",
            "text-align": "left",
            "offset-x": 40
          }
        },
        {
          "type": "circle",
          "size": 5,
          "x": "30%",
          "y": 20,
          "background-color": "#0192BB",
          "label": {
            "width": 60,
            "text": "Female",
            "text-align": "left",
            "offset-x": 40
          }
        }
      ],
      "series": [{
          "data-box": [
            [
              760,
              801,
              848,
              895,
              965
            ],
            [
              733,
              853,
              939,
              980,
              1080
            ]
          ],
          "text": "f1"
        },
        {
          "data-box": [
            [
              733,
              853,
              939,
              980,
              1080
            ],
            [
              733,
              853,
              939,
              980,
              1080
            ]
          ],
          "text": "f2"
        }
      ]
    };
    zingchart.render({
      id: 'myChart',
      data: myJson,
      height: 400,
      width: 600
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src='http://cdn.zingchart.com/zingchart.min.js'></script>
  <script>
    zingchart.MODULESDIR = 'http://cdn.zingchart.com/modules/'
  </script>

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

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

</html>

var myJson = {
  "type": "boxplot",
  "vertical-labels": true,
  "scale-x": {
    "labels": []
  },
  "shapes": [{
      "type": "circle",
      "size": 5,
      "x": "10%",
      "y": 20,
      "background-color": "#89B92D",
      "label": {
        "width": 60,
        "text": "Male",
        "text-align": "left",
        "offset-x": 40
      }
    },
    {
      "type": "circle",
      "size": 5,
      "x": "30%",
      "y": 20,
      "background-color": "#0192BB",
      "label": {
        "width": 60,
        "text": "Female",
        "text-align": "left",
        "offset-x": 40
      }
    }
  ],
  "series": [{
      "data-box": [
        [
          760,
          801,
          848,
          895,
          965
        ],
        [
          733,
          853,
          939,
          980,
          1080
        ]
      ],
      "text": "f1"
    },
    {
      "data-box": [
        [
          733,
          853,
          939,
          980,
          1080
        ],
        [
          733,
          853,
          939,
          980,
          1080
        ]
      ],
      "text": "f2"
    }
  ]
};
zingchart.render({
  id: 'myChart',
  data: myJson,
  height: 400,
  width: 600
});