<body ng-app="myApp">
  <div ng-controller="MainController">
    <div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="568px"></div>
  </div>
</body>
html,
body {
  margin: 0px;
}
var app = angular.module('myApp', ['zingchart-angularjs']);

app.controller('MainController', function($scope) {
  $scope.myJson = {
    type: "pie",
    title: {
      textAlign: 'center',
      text: "My title"
    },
    plot: {
      slice: 50 //to make a donut
    },
    series: [{
      values: [3],
      text: "Total Commits"

    }, {
      values: [4],
      text: "Issues Solved"

    }, {
      values: [8],
      text: "Issues Submitted"
    }, {
      values: [7],
      text: "Number of Clones"

    }]
  };
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/zingchart-2.3.3.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/zingchart-angularjs-1.0.4.js