Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-app="demo" >
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/chart.js/latest/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/1.0.3/angular-chart.min.js"></script>
  <div class="row" ng-controller="GlobalCtrl">
        <div class="col-xs-12">
            <canvas id="pie" class="chart chart-pie" chart-data="data" 
            chart-labels="labels" chart-options="options"
            chart-dataset-override="datasetOverride"  
            ></canvas> 
        </div>
   </div>
</body>
</html>
 
var app = angular.module('demo', ['chart.js']);
app.controller('GlobalCtrl', function($scope) {
    $scope.data = [10,4,3];
    $scope.labels = ['demo1','demo2','demo3'];
    $scope.options = {
        legend: {
            display: true,
            position: 'bottom'
        }
    };
    $scope.datasetOverride = [
      {
        pointBackgroundColor: ["#000080","#000080","#000000"] ,
        backgroundColor: ["#0000FF","#00ff00","#FFFFFF"]
      }
    ]
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers