score:0

you can use chart.js with angular by injecting it. if you want to change the type just set the type on the html

demo

angular.module("app", ["chart.js"])
  .controller("barctrl", function($scope) {
    $scope.commonestimationstats = {
      rates: [{
        "direction": {
          "id": 13,
          "month": "2016",
          "type": 1
        },
        "points": 5
      }, {
        "direction": {
          "id": 14,
          "month": "2017",
          "type": 1
        },
        "points": 3
      }]
    };
    $scope.labels = [];
    $scope.data = [];
    angular.foreach($scope.commonestimationstats.rates, function(key, value) {
      $scope.labels.push(key.direction.month);
      $scope.data.push(key.points);
    })
    $scope.datasetoverride = [{
      fill: true,
      backgroundcolor: [
        "#66ff33",
        "#36a2eb",
        "#ffce56"
      ]
    }, {
      fill: true,
      backgroundcolor: [
        "#ffff00",
        "#46bfbd",
        "#fdb45c"
      ]
    }];
  });
<!doctype html>
<html ng-app="app">

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.2.0/chart.min.js"></script>
  <script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>  
</head>
<body>
  <div ng-controller="barctrl">
    <canvas id="bar" class="chart chart-pie" chart-data="data" chart-dataset-override="datasetoverride" chart-series="series" chart-labels="labels"   chart-options="options"></canvas>
  </div>
</body>
</html>


Related Query

More Query from same tag