add horizontal bar

Author: carlcraig

README.md

@@ -36,6 +36,7 @@ You will then have access to the following directives:
 - tc-chartjs
 - tc-chartjs-line
 - tc-chartjs-bar
+- tc-chartjs-horizontalbar
 - tc-chartjs-radar
 - tc-chartjs-polararea
 - tc-chartjs-pie
@@ -99,6 +100,7 @@ Available Types:
 
 - line
 - bar
+- horizontalbar
 - radar
 - polararea
 - pie

demo/index.html

@@ -72,6 +72,26 @@ <h2>Bar Chart</h2>
 
   <hr>
 
+  <div class="row" ng-controller="BarController">
+    <div class="col-md-12">
+      <h2>Horizontal Bar Chart</h2>
+    </div>
+    <div class="col-md-8">
+      <canvas
+        tc-chartjs-horizontalbar
+        chart-data="chartData"
+        chart-options="chartOptions"
+        chart-click="onChartClick(event)"
+        chart-legend="horizontalBarChart"
+      ></canvas>
+    </div>
+    <div class="col-md-4">
+      <div tc-chartjs-legend chart-legend="horizontalBarChart" class="tc-chart-js-legend"></div>
+    </div>
+  </div>
+
+  <hr>
+
   <div class="row" ng-controller="BubbleController">
     <div class="col-md-12">
       <h2>Bubble Chart</h2>

dist/tc-angular-chartjs.js

@@ -16,6 +16,7 @@
 TcChartjs.$inject = ["TcChartjsFactory"];
 TcChartjsLine.$inject = ["TcChartjsFactory"];
 TcChartjsBar.$inject = ["TcChartjsFactory"];
+TcChartjsHorizontalBar.$inject = ["TcChartjsFactory"];
 TcChartjsRadar.$inject = ["TcChartjsFactory"];
 TcChartjsPolararea.$inject = ["TcChartjsFactory"];
 TcChartjsPie.$inject = ["TcChartjsFactory"];
@@ -25,6 +26,7 @@ TcChartjsBubble.$inject = ["TcChartjsFactory"];angular
   .directive('tcChartjs', TcChartjs)
   .directive('tcChartjsLine', TcChartjsLine)
   .directive('tcChartjsBar', TcChartjsBar)
+  .directive('tcChartjsHorizontalbar', TcChartjsHorizontalBar)
   .directive('tcChartjsRadar', TcChartjsRadar)
   .directive('tcChartjsPolararea', TcChartjsPolararea)
   .directive('tcChartjsPie', TcChartjsPie)
@@ -45,6 +47,10 @@ function TcChartjsBar(TcChartjsFactory) {
   return new TcChartjsFactory('bar');
 }
 
+function TcChartjsHorizontalBar(TcChartjsFactory) {
+  return new TcChartjsFactory('horizontalbar');
+}
+
 function TcChartjsRadar(TcChartjsFactory) {
   return new TcChartjsFactory('radar');
 }
@@ -162,6 +168,8 @@ function TcChartjsFactory() {
       switch (typeLowerCase) {
         case 'polararea':
           return 'polarArea';
+        case 'horizontalbar':
+          return 'horizontalBar';
         default:
           return type;
       }

dist/tc-angular-chartjs.min.js

@@ -3,6 +3,7 @@ angular
   .directive('tcChartjs', TcChartjs)
   .directive('tcChartjsLine', TcChartjsLine)
   .directive('tcChartjsBar', TcChartjsBar)
+  .directive('tcChartjsHorizontalbar', TcChartjsHorizontalBar)
   .directive('tcChartjsRadar', TcChartjsRadar)
   .directive('tcChartjsPolararea', TcChartjsPolararea)
   .directive('tcChartjsPie', TcChartjsPie)
@@ -23,6 +24,10 @@ function TcChartjsBar(TcChartjsFactory) {
   return new TcChartjsFactory('bar');
 }
 
+function TcChartjsHorizontalBar(TcChartjsFactory) {
+  return new TcChartjsFactory('horizontalbar');
+}
+
 function TcChartjsRadar(TcChartjsFactory) {
   return new TcChartjsFactory('radar');
 }
@@ -140,6 +145,8 @@ function TcChartjsFactory() {
       switch (typeLowerCase) {
         case 'polararea':
           return 'polarArea';
+        case 'horizontalbar':
+          return 'horizontalBar';
         default:
           return type;
       }