Angular Charts

Angular Chart

Reactive, responsive, beautiful charts for AngularJS based on Chart.js

Code on Github Download ()

Getting started

Dependencies

This repository contains a set of native AngularJS directives for Chart.js. The only required dependencies are:

Files to download

The easiest is to download with bower: 

bower install angular-chart.js --save
Alternatively files can be downloaded downloaded from Github.

Whichever method you choose the good news is that the overall size is very small: <5kb for all directives (~1kb with gzip compression!)

Installation

<script src="bower_components/dist/angular-chart.js"></script>

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the chart.js module:

angular.module('myModule', ['chart.js']);

CSS

You need to include a link to the css file in your page.

<link rel="stylesheet" href="bower_components/dist/angular-chart.css">

Colours

Series have beautiful pre-sets colours (to a maximum of 7 series, after that colours will be randomly generated). They can be overwritten using Chart.defaults.global.colours.

  1. Blue
  2. Light grey
  3. Red
  4. Green
  5. Yellow
  6. Grey
  7. Dark Grey

Directives

Line Chart
.chart-line
  • data: series data
  • labels: x axis labels
  • legend (default: false): show legend below the chart
  • options (default: {}): Chart.js options
  • series (default: []): series labels
  • click (optional): onclick event handler
  • colours (default to global colours): colours for the chart
 
<canvas id="line" class="chart chart-line" data="data"
  labels="labels" legend="true" series="series"
  click="onClick">
</canvas> 
angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
});
.chart-bar
  • data: series data
  • labels: x axis labels
  • legend (default: false): show legend below the chart
  • options (default: {}): Chart.js options
  • series (default: []): series labels
  • colours (default to global colours): colours for the chart
 
<canvas id="bar" class="chart chart-bar" data="data"
  labels="labels"></canvas> 
angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
});
Bar Chart
Doughnut Chart
.chart-doughnut
  • data: series data
  • labels: series labels
  • legend (default: false): show legend below the chart
  • options (default: {}): Chart.js options
  • colours (default to global colours): colours for the chart
 
<canvas id="doughnut" class="chart chart-doughnut" data="data"
  labels="labels"></canvas> 
angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
});
.chart-radar
  • data: series data
  • labels: series labels
  • legend (default: false): show legend below the chart
  • options (default: {}): Chart.js options
  • series (default: []): series labels
  • click (optional): onclick event handler
  • colours (default to global colours): colours for the chart
 
<canvas id="radar" class="chart chart-radar" data="data"
  labels="labels"></canvas> 
angular.module("app", ["chart.js"]).controller("RadarCtrl", function ($scope) {
  $scope.labels =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];

  $scope.data = [
    [65, 59, 90, 81, 56, 55, 40],
    [28, 48, 40, 19, 96, 27, 100]
  ];
});
Radar Chart
Pie Chart
.chart-pie
  • data: series data
  • labels: series labels
  • legend (default: false): show legend below the chart
  • options (default: {}): Chart.js options
  • colours (default to global colours): colours for the chart
 
<canvas id="pie" class="chart chart-pie" data="data"
  labels="labels"></canvas> 
angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
});
.chart-polar-area
  • data: series data
  • labels: series labels
  • legend (default: false): show legend below the chart
  • options (default: {}): Chart.js options
  • colours (default to global colours): colours for the chart
 
<canvas id="polar-area" class="chart chart-polar-area" data="data"
  labels="labels"></canvas> 
angular.module("app", ["chart.js"]).controller("PolarAreaCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
  $scope.data = [300, 500, 100, 40, 120];
});
Polar Area Chart
Dynamic Chart
.chart-base
  • chart-type: chart type e.g. Bar, PolarArea, etc. or other plugins
  • other options according to chart type
 
<canvas id="base" class="chart-base" chart-type="type" data="data"
  labels="labels" legend="true"></canvas> 
angular.module("app", ["chart.js"]).controller("BaseCtrl",
  function ($scope) {
    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
    $scope.data = [300, 500, 100, 40, 120];
    $scope.type = 'PolarArea';

    $scope.toggle = function () {
      $scope.type = $scope.type === 'PolarArea' ?
        'Pie' : 'PolarArea';
    };
});

Reactive

All charts are reactive and will update automatically when data changes.

Chart Data
{{label}}
{{data[$parent.$index][$index]}}
Reactive Chart