tc-angular-chartjs

Angular Directives for Chart.js

---

Install

Install via bower:

$ bower install tc-angular-chartjs

This will install Angular.js, Chart.js and tc-angular-chartjs. In the bower_components directory.

Add the scripts just before your closing </body>

<script src="bower_components/Chart.js/Chart.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/tc-angular-chartjs/dist/tc-angular-chartjs.min.js"></script>

Alternatively download the source and include dist/tc-angular-chartjs.min.js in your scripts.

Basic Usage

To use tc-angular-chartjs, inject tc.chartjs into your module. You will also need to define options and data on the scope.

angular
  .module( 'myModule', [ 'tc.chartjs' ])
  .controller( 'myController', function( $scope ) {

    // Chart.js Data
    $scope.data = { /* options */ }

    // Chart.js Options
    $scope.options = { /* data */ };

  });

Then use the directives in your html, passing your scope data and options to the chart-data and chart-options attributes

<div ng-app="myModule">
  <div ng-controller="myController">

    <canvas tc-chartjs chart-type="line" chart-data="data" chart-options="options"></canvas>

  </div>
</div>

Directives:

• tc-chartjs
  • Using this directive will require an additional attribute chart-type to define the type of chart to create
• tc-chartjs-line
• tc-chartjs-bar
• tc-chartjs-doughnut
• tc-chartjs-polararea
• tc-chartjs-radar

---