Chart.JS using Angular.JS on JSFiddle

Question

I'm trying to create a tested graph mimicking this chart from this documentation.

In my JSFiddle (https://jsfiddle.net/bheng/2pcmubwq/)

I tried adding all the links needed in the resources :

HTML

<canvas id="bar" class="chart chart-bar"
  chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>

JS

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]
  ];
});

Result

I see no errors in the console, but this white screen.

What did I do wrong to make my graph didn't render?

In the future use a linter or IDE that can spot errors for you. The HTML is badly formed. — Phix
– Phix, Commented Mar 4, 2021 at 21:23
Ok. Will do. I was playing with js fiddle forgot to test it locally. I would have caught that. — code-8
– code-8, Commented Mar 4, 2021 at 21:26

Arek Kostrzeba · Accepted Answer · 2021-03-04 21:31:19Z

2

Every angularJs app have to be mounted in the document using those directives: ng-app ng-controller
Your fiddle fixed: https://jsfiddle.net/nmwypgdq/9/

<div ng-app="app" ng-controller="BarCtrl">
  <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
</div>

$scope object passed by controller callback is available in your template. You can reference its properties and methods in the template. Thus chart-data="data" binds HTML element property chart-data with $scope.data defined in the controller callback. chart-labels is bound with $scope.labels and so on...

edited Mar 4, 2021 at 21:31

answered Mar 4, 2021 at 21:18

Arek Kostrzeba

5791 gold badge8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Chart.JS using Angular.JS on JSFiddle

HTML

JS

Result

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JS

Result

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related