Angular Chartjs Directive


Usage

  1. Include chartjs-directive.js.
  2. Add directive
    <div ng-app="myApp">
      <chart value="myChart"></chart>
    </div>
  3. Inject some data
    
    angular.module('myApp', ['chartjs-directive'])
      .controller('myController', function($scope){
    
        var data = {
          labels : ["January","February","March","April","May","June","July"],
          datasets : [
            {
              fillColor : "rgba(220,220,220,0.5)",
              strokeColor : "rgba(220,220,220,1)",
              pointColor : "rgba(220,220,220,1)",
              pointStrokeColor : "#fff",
              data : [65,59,90,81,56,55,40]
            },
            {
              fillColor : "rgba(151,187,205,0.5)",
              strokeColor : "rgba(151,187,205,1)",
              pointColor : "rgba(151,187,205,1)",
              pointStrokeColor : "#fff",
              data : [28,48,40,19,96,27,100]
            }
          ]
        }
    
        $scope.myChart = data;
      });
    

In action

^ This is a chart

Tag Parameters

value can be any of the chartjs chart types:

Chart Parameters


Bower

Installable via bower:

bower install angular-chartjs-directive

License

MIT

Fork me on GitHub