Chart.js and angular-chart.js


chartjs is JavaScript library to make several types of chart.
It’s simple and
We can use it under MIT license. We improve our website to use it.


  • Line Chart
  • Bar Chart
  • Radar Chart
  • Polar Area Chart
  • Pie & Doughnut Charts

How to user it

Download Chart.js and import it with script tag in html
If you use bower,

bower install Chart.js --save

In Chart.js directory(bower_components/Chart.js/samples), there are several samples.


  <script src="bower_components/Chart.js/Chart.min.js"></script>
  window.onload = function(){
     var ctx = document.getElementById("myChart").getContext("2d");
	 var barChartData = {
		labels : ["Math","Science","English"],
		datasets : [
				fillColor : "rgba(0,255,0,0.5)",
				strokeColor : "rgba(0,255,0,0.8)",
				highlightFill: "rgba(220,220,220,0.75)",
				highlightStroke: "rgba(220,220,220,1)",
				data : [100, 40, 55]

     var myNewChart = new Chart(ctx).Bar(barChartData);
<canvas id="myChart" width="400" height="400"></canvas>


Unfortunately, x and y axis cannot be reversed in chart.js


angular-chart.js works with Chart.js and Angular.js
We can set options in scope and work with canvas tag and angular controller

How to use

bower is simple

bower install angular-chart.js --save


	<script src="bower_components/angular/angular.min.js"></script>
	<script src="bower_components/Chart.js/Chart.min.js"></script>
	<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
	<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
	angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
	$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
    $scope.data1 = [300, 500, 100];
	$scope.options = {responsive: false}
	$scope.labels2 = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
	$scope.data2 = [[65, 59, 80, 81, 56, 55, 40]];
	$scope.colors = ['#00FF00', '#00FF00'];
<body ng-app="app" ng-controller="DoughnutCtrl">
<canvas id="doughnut" class="chart chart-doughnut" chart-options="options"
  chart-data="data1" chart-labels="labels">
<canvas id="bar" class="chart chart-bar" height="500" width="400" chart-data="data2" chart-labels="labels2" chart-series="series" chart-colours="colors" chart-options="options" >