Angular Charts TEST

by Osama Qassar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<div class="container" ng-app="app" ng-controller="ChartCtrl">
    <div class="row">
        <div class="col-md-6">
            <canvas id="bar" 
              class="chart chart-horizontal-bar" 
              chart-data="chartConfig.data" 
              chart-labels="chartConfig.labels" 
              chart-series="chartConfig.series" 
              chart-options="chartConfig.options">
            </canvas>
        </div>
    </div>
</div>

JavaScript

angular.module("app", ["chart.js"])
.controller("ChartCtrl", function($scope) {
		$scope.chartConfig = {
      DataSetOverride : [{ yAxisID: 'y-axis-1' }],
      colors: ["#3ee22e", "#eeeeee"],
            tooltips: {
               filter: function (tooltipItem, data) {
               alert(data)
                   var label = data.labels[tooltipItem.index];
                   if (label == "Total") {
                     return false;
                   } else {
                     return true;
                   }
               }
            },
      options : {
            tooltips:{
            xPadding:20,
            x:0
            },
            maintainAspectRatio: false,
            spanGaps: false,
            responsive: true,
        legend: { display: false },
        scales: {
          yAxes: [{
            backgroundColor:"rgba(252, 207, 3, 1)", 
            id: 'y-axis-1',
            position: 'left', 
            barThickness: 4,
            border:false,
            gridLines: {
              color: "rgba(0, 0, 0, 0)",
            },
            stacked: true,
          }],
          xAxes: [{
              scaleLabel: {
                display: true,
                labelString: "Percentage"
              },
              gridLines: {
                color: "rgba(0, 0, 0, 0)",
              },
              display: false,
          }]
        }
      },
      labels:["100% ★5","0% ★4","0% ★3","0% ★2","0% ★1"], 
      series:["Ratings Number", "Total"], 
      data:[ 
        [3, 0, 0, 0, 0],
        [3,3,3,3,3]
        ],
    }
});