# 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:

- AngularJS (tested with 1.2.20 and 1.3.10 although it probably works with older versions)
- Chart.js (requires Chart.js 1.0, tested with version 1.0.1-beta.2, 1.0.1-beta.4, and and 1.0.1).

### 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