angular-chart.js

by Osama Qassar

HTML

<script src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.2/angular-chart.min.js"></script>
<div ng-app="chartDemo" ng-controller="MainController as mainCtrl">
      <canvas id="doughnut" 
      class="chart chart-doughnut"
      chart-data="crt.data" 
      chart-labels="crt.labels" 
      chart-options="crt.options"
      chart-colors="crt.colors">
      </canvas>
</div>

JavaScript

angular.module('chartDemo', ['chart.js'])
	.config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
      //animation: false,
      //responsive: false
    });
  }])
	.controller('MainController', MainController);

function MainController($scope, $timeout) {
  var vm = this;
  
  vm.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "sadaas"];
  vm.data = [200, 500, 100, 545];
  vm.colors = ["#3ee22e", "#eeeeee", '#949FB1', '#4D5360'];
  vm.options = {
    legend: {
      display: true,
      position: 'bottom'
    },
    cutoutPercentage: 60,
    tooltipEvents: [],
    tooltipCaretSize: 0,
    showTooltips: true,
    onAnimationComplete: function() {
      self.showTooltip(self.segments, true);
    }
  }
  
$scope.crt =  {"labels":["Website clicks","Phone clicks","Direction clicks"],"data":[3,0,0],"colors":["#3ee22e","#03a1fc","#ff8585"],"options":{"legend":{"display":true,"position":"bottom"},"cutoutPercentage":60,"tooltipEvents":[],"tooltipCaretSize":0,"showTooltips":true}} 
}
MainController.$inject = ['$scope', '$timeout'];