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 from Github or via npm. See readme for more information.

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

Installation

You need to include the dependencies in your page:

<script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
<script src="bower_components/Chart.js/Chart.min.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.min.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

Colors

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

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

You can also use the provider : ChartJsProvider in a .config()

(function (ChartJsProvider) {
  ChartJsProvider.setOptions({ colors : [ '#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'] });
});

Directives

Line Chart
.chart-line
  • chart-data: series data
  • chart-labels: x axis labels
  • chart-options (default: {}): Chart.js options
  • chart-series (default: []): series labels
  • chart-click (optional): onclick event handler
  • chart-hover (optional): onmousemove event handler
  • chart-colors (default to global colors): colors for the chart
  • chart-y-axes (optional): if true add multiple axis, required: ids y-axis-{n} in the options (view Javascript)
 
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-y-axes="true" chart-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);
  };
  $scope.options = {
    scales: {
      yAxes: [
        {
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left'
        },
        {
          id: 'y-axis-2',
          type: 'linear',
          display: true,
          position: 'right'
        }
      ]
    }
  };
});
.chart-bar
  • chart-data: series data
  • chart-labels: x axis labels
  • chart-options (default: {}): Chart.js options
  • chart-series (default: []): series labels
  • chart-click (optional): onclick event handler
  • chart-hover (optional): onmousemove event handler
  • chart-colors (default to global colors): colors for the chart
  • chart-y-axes (optional): if true add multiple axis, required:: ids y-axis-{n} in the options
 
<canvas id="bar" class="chart chart-bar"
  chart-data="data" chart-labels="labels"> chart-series="series"
</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
  • chart-data: series data
  • chart-labels: series labels
  • chart-options (default: {}): Chart.js options
  • chart-click (optional): onclick event handler
  • chart-hover (optional): onmousemove event handler
  • chart-colors (default to global colors): colors for the chart
 
<canvas id="doughnut" class="chart chart-doughnut"
  chart-data="data" chart-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
  • chart-data: series data
  • chart-labels: series labels
  • chart-options (default: {}): Chart.js options
  • chart-series (default: []): series labels
  • chart-click (optional): onclick event handler
  • chart-hover (optional): onmousemove event handler
  • chart-colors (default to global colors): colors for the chart
 
<canvas id="radar" class="chart chart-radar"
  chart-data="data" chart-options="options" chart-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
  • chart-data: series data
  • chart-labels: series labels
  • chart-options (default: {}): Chart.js options
  • chart-click (optional): onclick event handler
  • chart-hover (optional): onmousemove event handler
  • chart-colors (default to global colors): colors for the chart
 
<canvas id="pie" class="chart chart-pie"
  chart-data="data" chart-labels="labels" chart-options="options">
</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
  • chart-data: series data
  • chart-labels: series labels
  • chart-options (default: {}): Chart.js options
  • chart-click (optional): onclick event handler
  • chart-hover (optional): onmousemove event handler
  • chart-colors (default to global colors): colors for the chart
 
<canvas id="polar-area" class="chart chart-polar-area"
  chart-data="data" chart-labels="labels" chart-options="options">
</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"
  chart-data="data" chart-labels="labels" >
</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