How do we can use chart.js in angular JS?

by

0👍

✅

You need to refer the angular-chart and chart.js libraries together and inject as a dependency to your module,

angular.module("app", ["chart.js"])

DEMO

(function(angular) {
  'use strict';
  angular.module('myApp', ['chart.js'])

  .controller('myController', [function() {
    var ctrl = this;

    ctrl.socialChart = {
      options : {
        scales: {
          xAxes: [{
            stacked: true,
          }],
          yAxes: [{
            stacked: true
          }]
        }
      },
      type: 'StackedBar',
        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
        colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
        data : [
      [65, 59, 90, 81, 56, 55, 40],
      [28, 48, 40, 19, 96, 27, 100]
    ]
    }   

   
  }]);

})(window.angular);
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Multi Slot Transclude</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>    <script src="app.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myController as ctrl">
    <canvas id="outreach" class="chart chart-bar" 
        chart-labels="ctrl.socialChart.labels" 
        chart-data="ctrl.socialChart.data" 
        chart-series="ctrl.socialChart.series"
        chart-colors="ctrl.socialChart.colors"
        chart-options="ctrl.socialChart.options"></canvas>      
  </body>

</html>

Leave a comment