Search code examples
angularchartsjsfiddle

Apply chart.js in angular within jsfiddle

Found this code snippet on jsfiddle. How to apply the code below in a fresh jsfiddle? I try to choose different angular framework versions within the javascript panel but it throws an error if I run the code. The original fiddle has no framework selected.

<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>

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

  • See the “Resources” section on the left of jsfiddle for how Angular is being imported there. To apply the code in a fresh jsfiddle use “Fork” or also copy the resources.

    Perhaps worth noting this is using an old old version of Angular. That may be what you want but if not try finding more recent stuff. There’s loads of modern documentation on Angular and Chart.js using the latest versions.

    Hope that helps.