Angulr-ChartJS horizontalBar fixedHeight

by klode

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.min.js"></script>

<div ng-controller="MainController">
<h2>
Horizontal Bar Chart in Fixed-height container
</h2>

  <canvas class="chart chart-horizontal-bar" chart-data="data" chart-labels="labels" chart-series="series" chart-colours="colours" chart-options="options"></canvas>
<div class="label">
Apples and Artichokes
</div>

<h2>
Horizontal Bar Chart Dynamic height container -- directive
</h2>
<dynamic-height-chartjs chart="dynamicChart"></dynamic-height-chartjs>

</div>  


<script src="https://rawgit.com/tomsouthall/Chart.HorizontalBar.js/master/Chart.HorizontalBar.js"></script>

<script src="https://rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>

CSS

.chart-container{
    height: 400px;
    border: 1px solid black;
}
.label {
  text-align: center;
}
//rgba(252,176,52,0.4)

JavaScript

var app = angular.module('myApp', ['chart.js']);

app.controller('MainController', function($scope) {
  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Apples', 'Artichokes'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function(points, evt) {
    console.log(points, evt);
  };
  $scope.options = {
    responsive: true,
    maintainAspectRatio: false,
  }
  $scope.colours = [{
    fillColor: 'rgba(98,160,95,0.8)',
    strokeColor: 'rgba(98,160,95,0.8)',
    highlightFill: 'rgba(98,160,95,0.4)',
    highlightStroke: 'rgba(98,160,95,1)',
  }, {
    fillColor: 'rgba(252,176,52,0.8)',
    strokeColor: 'rgba(252,176,52,0.8)',
    highlightFill: 'rgba(252,176,52,0.4)',
    highlightStroke: 'rgba(252,176,52,1)',
  }];
  
  $scope.dynamicChart = {
  	type: 'HorizontalBar',
  	colours: $scope.colours,
    labels: $scope.labels,
    data: $scope.data,
    series: $scope.series,
    options: $scope.options
  };

});

app.directive('chartHorizontalBar', function(ChartJsFactory) {
  return new ChartJsFactory('HorizontalBar');
});

app.directive('dynamicHeightChartjs',
    function() {
      return {
        restrict: 'E',
        template: '<canvas class="chart chart-base" chart-type="chart.type" chart-series="chart.series" chart-data="chart.data" chart-labels="chart.labels" chart-colours="chart.colours" chart-options="chart.options"></canvas>',
        scope:{
            chart: '='
        },
        link: function(scope, element) {
        	var height = scope.chart.labels.length * 100;
        	console.log('dynamicHeightChartjs ', height);
        	element.children('.chart-container').css('height', height+'px');

        }
      };
    }
  );