angular-chart.js - beautiful, reactive, responsive charts for Angular.JS using Chart.js

Dependencies

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

AngularJS (requires at least 1.4.x)
Chart.js (requires Chart.js 2.x).

Files to download

The easiest is to download with npm:

npm install angular-chart.js --save

Alternatively files can be downloaded from Github or via PolarArea. 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="node_modules/chart.js/Chart.min.js"></script>
<script src="node_modules/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.

Blue
Light grey
Red
Green
Yellow
Grey
Dark Grey

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

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

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-dataset-override (optional): override datasets individually

<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" 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.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
  $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-dataset-override (optional): override datasets individually

<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
chart-dataset-override (optional): override datasets individually

<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
chart-dataset-override (optional): override datasets individually

<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
chart-dataset-override (optional): override datasets individually

<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
chart-dataset-override (optional): override datasets individually

<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

Horizontal Bar Chart

.chart-horizontal-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-dataset-override (optional): override datasets individually

<canvas id="base" class="chart-horizontal-bar"
  chart-data="data" chart-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]
    ];
});

.chart-bubble

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-dataset-override (optional): override datasets individually


<canvas id="base" class="chart-bubble" chart-data="data"
  chart-series="series" >
</canvas>

angular.module("app", ["chart.js"]).controller("BubbleCtrl",
  function ($scope) {
    // see examples/bubble.js for random bubbles source code
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [{
        x: 40,
        y: 10,
        r: 20
      }],
      [{
        x: 10,
        y: 40,
        r: 50
      }]
    ];
});

Bubble 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 Chart

Chart Data

{{label}}
{{data[$parent.$index][$index]}}

<canvas id="base" class="chart-bar"
  chart-data="data" chart-labels="labels" chart-colors="colors"
  chart-dataset-override="datasetOverride" >
</canvas>

angular.module("app", ["chart.js"]).controller("MixedChartCtrl",
  function ($scope) {
    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];

    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    $scope.data = [
      [65, -59, 80, 81, -56, 55, -40],
      [28, 48, -40, 19, 86, 27, 90]
    ];
    $scope.datasetOverride = [
      {
        label: "Bar chart",
        borderWidth: 1,
        type: 'bar'
      },
      {
        label: "Line chart",
        borderWidth: 3,
        hoverBackgroundColor: "rgba(255,99,132,0.4)",
        hoverBorderColor: "rgba(255,99,132,1)",
        type: 'line'
      }
    ];
});

Bar line Chart

Angular Chart

Getting started

Dependencies

Files to download

Installation

CSS

Colors

Directives

Reactive

Mixed type charts