Inline plugins support for charts (#86)

* support for chart inline plugins was added

* version 2.1.4

README.md

@@ -45,9 +45,9 @@ You will then have access to the following directives:
 
 Just place one of these directives on a `canvas` element to create a Chart.js chart.
 
-You will also want to give the chart some `data` and `options`. These can be provided via the `chart-options` and `chart-data` attributes.
+You will also want to give the chart some `data`, `options` and `plugins`. These can be provided via the `chart-options`, `chart-data` and `chart-plugins` attributes.
 
-For data structures and options please refer to [Chart.js documentation](http://www.chartjs.org/docs/)
+For data structures, options and inline plugins please refer to [Chart.js documentation](http://www.chartjs.org/docs/)
 
 You can also handle chart clicks via the `chart-click` attribute.
 
@@ -58,6 +58,7 @@ Example Pie Chart
   tc-chartjs-pie
   chart-data="myData"
   chart-options="myOptions"
+  chart-plugins="myPlugins"
   chart-click="onChartClick(event)"
 ></canvas>
 ```
@@ -92,6 +93,11 @@ $scope.myOptions =  {
   // e.g. Pie Chart Options http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options
 };
 
+$scope.myPlugins = [{
+  // Chart.js inline plugins go here
+  // e.g. http://www.chartjs.org/docs/latest/developers/plugins.html#using-plugins
+}];
+
 $scope.onChartClick = function (event) {
   console.log(event);
 };

dist/tc-angular-chartjs.js

@@ -1,6 +1,6 @@
 /**
  * tc-angular-chartjs - http://carlcraig.github.io/tc-angular-chartjs/
- * Copyright (c) 2016 Carl Craig
+ * Copyright (c) 2017 Carl Craig
  * Dual licensed with the Apache-2.0 or MIT license.
  */
 ;(function(root, factory) {
@@ -80,6 +80,7 @@ function TcChartjsFactory() {
       scope: {
         data: '=chartData',
         options: '=chartOptions',
+        plugins: '=chartPlugins',
         type: '@chartType',
         legend: '=?chartLegend',
         chart: '=?chart',
@@ -125,7 +126,7 @@ function TcChartjsFactory() {
         };
       }
 
-      $scope.$watch('[data, options]', function (value) {
+      $scope.$watch('[data, options, plugins]', function (value) {
         if (value && $scope.data) {
           if (chartObj && typeof chartObj.destroy === 'function') {
             chartObj.destroy();
@@ -140,7 +141,8 @@ function TcChartjsFactory() {
           chartObj = new Chart(ctx, {
             type: type,
             data: angular.copy($scope.data),
-            options: $scope.options
+            options: $scope.options,
+            plugins: $scope.plugins
           });
 
           if (showLegend) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tc-angular-chartjs",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "AngularJS directives for Chart.js",
   "homepage": "http://carlcraig.github.io/tc-angular-chartjs/",
   "author": "Carl Craig <[email protected]>",

src/tc-angular-chartjs.js

@@ -57,6 +57,7 @@ function TcChartjsFactory() {
       scope: {
         data: '=chartData',
         options: '=chartOptions',
+        plugins: '=chartPlugins',
         type: '@chartType',
         legend: '=?chartLegend',
         chart: '=?chart',
@@ -102,7 +103,7 @@ function TcChartjsFactory() {
         };
       }
 
-      $scope.$watch('[data, options]', function (value) {
+      $scope.$watch('[data, options, plugins]', function (value) {
         if (value && $scope.data) {
           if (chartObj && typeof chartObj.destroy === 'function') {
             chartObj.destroy();
@@ -117,7 +118,8 @@ function TcChartjsFactory() {
           chartObj = new Chart(ctx, {
             type: type,
             data: angular.copy($scope.data),
-            options: $scope.options
+            options: $scope.options,
+            plugins: $scope.plugins
           });
 
           if (showLegend) {