Untitled

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div id="demo"></div>
    <script src="https://cdn.zoomcharts-cloud.com/1/11/latest/zoomcharts.js"></script>
    <script src="script.js"></script>
  </body>

</html>

pc = new PieChart({
                        container: document.getElementById("demo"),
                        data: {
                            preloaded: {
                                subvalues: [
  {
    "name": "MAIN",
    "value": 202
  },
  {
    "name": "OUTSIDE METER/REGULATOR SET",
    "value": 114
  },
  {
    "name": "SERVICE",
    "value": 102
  },
  {
    "name": "OTHER",
    "value": 64
  },
  {
    "name": "SERVICE RISER",
    "value": 37
  },
  {
    "name": "DISTRICT REGULATOR/METERING STATION",
    "value": 28
  },
  {
    "name": "INSIDE METER/REGULATOR SET",
    "value": 16
  },
  {
    "name": "FARM TAP METER/REGULATOR SET",
    "value": 1
  }
]
                            }
                        },
                        pie: {
                            innerRadius: 0.6,
                            outerMargin: 50
                        },
                        slice: {
                            styleFunction: function (slice, data) {
                                slice.label.text = data.name;
                                slice.insideLabel.text = slice.percent.toFixed(0) + "%";
                                slice.fillColor = (data.extra && data.extra.color) || slice.fillColor;
                            }
                        },
                        interaction: {
                            others: {
                                centerGoesToPrevious: true,
                                maxSlicesVisible: 10
                            }
                        }
                    });