<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.5.3" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-resource@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/0.10.2/angular-chart.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Charts</h1>
<div ng-controller="DemoController">
<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
</div>
</body>
</html>
// Code goes here
(function(){
angular.module("app", ["chart.js"]);
angular.module("app").controller("DemoController", DemoController);
function DemoController ($scope) {
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
$scope.data = [300, 500, 100];
}
})();
/* Styles go here */
Simple example of Charts.js and AngularJs