Chartjs-Angular-chart.js Configuration

by

0đź‘Ť

âś…

Looking at the code, couple of issues I see are:

  • The module is defined “app” in Javascript, but defined as “examples” in HTML.
  • Dont see AngularJS imported in HTML.

I have created a plunker with your code and fixing above issues. Please check:

http://plnkr.co/edit/QHm3kP8HUU6HQjiuQxDW?p=preview

HTML:

    <html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  </head>
  <body ng-app="app">
    <div id="sidebar">
      <div id="logo">
        <img src="imgs/cloud.png" alt="logo">
      </div>
      <p>{{title}}</p>
    </div>
    <div id="content">
      <!-- Statistics -->
      <h1>This is a statement.</h1><br>
      <!-- ChartJS Implemenetation -->
      <div ng-controller="DoughnutCtrl">
        <canvas id="doughnut" class="chart chart-doughnut"
        chart-data="data" chart-labels="labels">
        </canvas>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

JS:

    angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
});

Let me know if you were able to fix from your end.

0đź‘Ť

There are two things,

(i) Rename <body ng-app="examples"> to <body ng-app="app">

(ii) You are missing the reference for angular.js

DEMO

angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
});
<!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>
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
  <canvas id="doughnut" class="chart chart-doughnut"
        chart-data="data" chart-labels="labels">
        </canvas>
</body>
</html>

0đź‘Ť

The issue ended up being a combination of a few factors.

  1. Adding the .js files used in the html file in the scripts section.
  2. Ordering the angular.min.js file first so it was defined for the other files.

A big thanks everyone who helped me debug this issue. It was really appreciated.

Leave a comment