Add legend before of after the graph or no legend

README.md

@@ -49,7 +49,7 @@ In the template...
 
 ```html
 <div ng-controller="testCtrl">
-	<cjs-doughnut dataset="someData" options="someOptions" segement-stroke-width="5"></cjs-doughnut>
+	<cjs-doughnut dataset="someData" options="someOptions" segement-stroke-width="5" legend="before"></cjs-doughnut>
 
 	<!--
 	<cjs-bar></cjs-bar>
@@ -60,15 +60,16 @@ In the template...
 	-->
 </div>
 ```
+Legend is optional, the default behavior is to apear before. Available options: before, after, none.
 
 In the controller...
 
 ```javascript
 myapp.controller('testCtrl', function ($scope) {
 	$scope.someData = {
 		labels: [
-        'Apr', 
-        'May', 
+        'Apr',
+        'May',
         'Jun'
       ],
       datasets: [
@@ -88,7 +89,7 @@ myapp.controller('testCtrl', function ($scope) {
 });
 ```
 
-This will result in a Doughnut chart using the dataset from the controller with a StrokeColor of #000 and a StrokeWidth of 5 because options set on the directive attributes override controller level settings for maximum flexibility.
+This will result in a Doughnut chart using the dataset from the controller with a StrokeColor of #000, a legend apearing before the graph and a StrokeWidth of 5 because options set on the directive attributes override controller level settings for maximum flexibility.
 
 ### Examples
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-chartjs",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "homepage": "https://github.com/petermelias/angular-chartjs",
   "authors": [
     "Peter M. Elias <petermelias@gmail.com>"

dist/angular-chartjs.js

@@ -1,6 +1,6 @@
 (function () {
   'use strict';
-  
+
   var chartjs = angular.module('chartjs', []),
     chartTypes = {
       line: 'Line',
@@ -44,47 +44,73 @@
 
       return {
         restrict: 'EAC',
-        template: '<canvas></canvas>',
+        template: '<div><canvas class="cjs-chart"></canvas></div>',
         replace: true,
+        require: '?legend',
         scope: {
           dataset: '=',
-          options: '='
+          options: '=',
+          legend: '@'
         },
         link: function postLink(scope, element, attrs) {
-          var ctx = element[0].getContext('2d'),
+          var chartEl;
+          var legendEl;
+
+          if(attrs.legend === 'before') {
+            element.prepend('<div class="cjs-legend"></div>');
+            chartEl = element[0].children[1];
+            legendEl = element[0].children[0];
+          }
+
+          if (attrs.legend === 'after' || !attrs.legend ) {
+            element.append('<div class="cjs-legend"></div>');
+            chartEl = element[0].children[0];
+            legendEl = element[0].children[1];
+          }
+
+          var ctx = chartEl.getContext('2d'),
               chart = new Chart(ctx),
               chartOpts = {};
 
           angular.extend(
-            chartOpts, 
+            chartOpts,
             Chart.defaults.global,
             Chart.defaults[chartType]
           );
 
           angular.extend(
-            chartOpts, 
+            chartOpts,
             scope.options,
             extractSpecOpts(
               chartOpts,
               attrs
             )
           );
-      
+
           chart = chart[chartType](scope.dataset, chartOpts);
+          legendEl.innerHTML = chart.generateLegend();
 
           scope.$watch('dataset', function (newData, oldData) {
             chart.initialize(newData);
+            legendEl.innerHTML = chart.generateLegend();
           }, true);
 
           scope.$watch('options', function (newData, oldData) {
             angular.extend(
-              chart.options, 
+              chart.options,
               scope.options
             );
           }, true);
-          
+
         }
       };
     };
   });
+
+  chartjs.directive('legend', function() {
+    return {
+      controller: function($scope) {}
+    }
+  });
+
 })();

src/js/main.js

@@ -1,6 +1,6 @@
 (function () {
   'use strict';
-  
+
   var chartjs = angular.module('chartjs', []),
     chartTypes = {
       line: 'Line',
@@ -44,48 +44,82 @@
 
       return {
         restrict: 'EAC',
-        template: '<div><canvas class="cjs-chart"></canvas><legend class="cjs-legend"></legend></div>',
+        template: '<div><canvas class="cjs-chart"></canvas></div>',
         replace: true,
+        require: '?legend',
         scope: {
           dataset: '=',
-          options: '='
+          options: '=',
+          legend: '@'
         },
         link: function postLink(scope, element, attrs) {
-          var ctx = element[0].children[0].getContext('2d'),
+          var chartEl;
+          var legendEl;
+
+          if(attrs.legend === 'before') {
+            element.prepend('<div class="cjs-legend"></div>');
+            chartEl = element[0].children[1];
+            legendEl = element[0].children[0];
+          }
+
+          if (attrs.legend === 'after' || !attrs.legend ) {
+            element.append('<div class="cjs-legend"></div>');
+            chartEl = element[0].children[0];
+            legendEl = element[0].children[1];
+          }
+
+          if(attrs.legend === 'none') {
+            chartEl = element[0].children[0];
+            legendEl = null;
+          }
+
+          var ctx = chartEl.getContext('2d'),
               chart = new Chart(ctx),
               chartOpts = {};
 
           angular.extend(
-            chartOpts, 
+            chartOpts,
             Chart.defaults.global,
             Chart.defaults[chartType]
           );
 
           angular.extend(
-            chartOpts, 
+            chartOpts,
             scope.options,
             extractSpecOpts(
               chartOpts,
               attrs
             )
           );
-      
+
           chart = chart[chartType](scope.dataset, chartOpts);
-          element[0].children[1].innerHTML = chart.generateLegend();
+          if(attrs.legend != 'none') {
+            legendEl.innerHTML = chart.generateLegend();
+          }
 
           scope.$watch('dataset', function (newData, oldData) {
             chart.initialize(newData);
+            if(attrs.legend != 'none') {
+              legendEl.innerHTML = chart.generateLegend();
+            }
           }, true);
 
           scope.$watch('options', function (newData, oldData) {
             angular.extend(
-              chart.options, 
+              chart.options,
               scope.options
             );
           }, true);
-          
+
         }
       };
     };
   });
+
+  chartjs.directive('legend', function() {
+    return {
+      controller: function($scope) {}
+    }
+  });
+
 })();