Angular Chartjs color example

barchart100.html

<div class="container-box">
  <canvas id="base" class="chart-bar"
          chart-data="data"
          chart-labels="labels"
          chart-colors="colors"
          chart-dataset-override="datasetOverride"
          chart-options="options"
          height="300" width="500">
  </canvas>
</div>

barchart100.js

'use strict';

/**
 * @ngdoc directive
 * @name dashboardWkApp.directive:barchar100p
 * @description
 * # barchar100p
 */
angular.module('dashboardWk')
  .directive('barchart100p',[ "APP_CONST", "$rootScope", function ( APP_CONST, $rootScope ) {
    return {
      templateUrl: APP_CONST.dTemplate + 'barchart100p.html',
      restrict: 'E',
      scope: {
        info: '=?'
      },
      controller: ['$scope', function ( $scope ) {
        $scope.colors = [];
        $scope.labels = $scope.info.data.label;
        $scope.series = $scope.info.data.series;
        $scope.data = $scope.info.data.value;
        $scope.datasetOverride = [];

        angular.forEach( $scope.info.data.datasets, function (v) {
          if (!v.hexa)
            v.hexa = $rootScope.getRandomColor();
          if ( v.hexa[0] !== '#')
            v.hexa = '#' + v.hexa;

          $scope.datasetOverride.push({
            label: v.label,
            type: v.type,
            fill: true,
            backgroundColor: v.hexa,
            borderColor: v.hexa,
            fillColor: v.hexa,
            strokeColor: v.hexa
          });
        });

        $scope.options = {
          responsive: true,
          maintainAspectRatio: true,
          legend: {
            display: true,
            position: 'bottom'
          },
          scales: {
            xAxes: [{
              stacked: true,
              scaleLabel: {
                display: true,
                labelString: 'Tahun'
              }
            }],
            yAxes: [{
              id: 'y-1',
              stacked: true,
              scaleLabel: {
                display: true,
                labelString: 'Realisasi biaya (%)'
              }
            }]
          }
        };
      }]
    };
  }]);

doublestackedchart.html

<div class="container-box" style="height: 50vh">
  <canvas id="base" class="chart-bar"
          chart-data="data"
          chart-labels="labels"
          chart-colors="colors"
          chart-dataset-override="datasetOverride"
          chart-options="options"
          height="300" width="500">
  </canvas>
</div>

doublestackedchart.js

'use strict';

/**
 * @ngdoc directive
 * @name dashboardWkApp.directive:barchar100p
 * @description
 * # barchar100p
 */
angular.module('dashboardWk')
  .directive('doubleStackedChart',[ "APP_CONST", "$rootScope", function ( APP_CONST, $rootScope ) {
    return {
      templateUrl: APP_CONST.dTemplate + 'barchart100p.html',
      restrict: 'E',
      scope: {
        info: '=?'
      },
      controller: ['$scope', function ( $scope ) {
        $scope.colors = [];
        $scope.labels = $scope.info.data.label;
        $scope.data = $scope.info.data.value;

        $scope.datasetOverride = [];

        angular.forEach( $scope.info.data.datasets, function (v) {
          $scope.datasetOverride.push({
            yAxisID: 'y-1',
            label: v.label,
            stack: v.stack,
            fill: true,
            backgroundColor: "#" + v.hexa,
            borderColor: "#" + v.hexa,
            fillColor: "#" + v.hexa,
            strokeColor: "#" + v.hexa
          });
        });

        $scope.options = {
          responsive: true,
          fontSize: 8,
          maintainAspectRatio: false,
          legend: {
            display: false,
            position: "bottom"
          },
          scales: {
           xAxes: [{
              id: 'x-1',
              stacked: true,
              ticks: {
                fontSize: 8
              },
              scaleLabel: {
                display: false,
                labelString: 'Tahun'
              }
            }],
            yAxes: [{
              id: 'y-1',
              stacked: true,
              ticks: {
                fontSize: 8
              },
              scaleLabel: {
                display: true,
                labelString: 'Realisasi biaya (%)'
              }
            }]
          }
        };

        $rootScope.$on("fullscreenEnabled", function (event, data) {
          if ($scope.options.legend) {
            $scope.options.legend.display = true;
            $scope.options.fontSize = 12;
            $scope.options.scales.xAxes[0].scaleLabel.display = true;
            $scope.options.scales.xAxes[0].ticks.fontSize = 12;
          }
        });

        $rootScope.$on("fullscreenDisabled", function (event, data) {
          if ($scope.options.legend) {
            $scope.options.legend.display = false;
            $scope.options.fontSize = 8;
            $scope.options.scales.xAxes[0].scaleLabel.display = false;
            $scope.options.scales.xAxes[0].ticks.fontSize = 8;
          }
        });

      }]
    };
  }]);

mixedchart.html

<div class="container-mixed">
  <canvas id="base" class="chart-bar"
          chart-data="data"
          chart-labels="labels"
          chart-colors="colors"
          chart-dataset-override="datasetOverride"
          chart-options="options"
          height="150" width="269">
  </canvas>
</div>

mixedchart.js

'use strict';

/**
 * @ngdoc directive
 * @name dashboardWk.directive:mixedChart
 * @description
 * # mixedChart
 */
angular.module('dashboardWk')
  .directive('mixedChart', ["APP_CONST", function ( APP_CONST ) {
    return {
      templateUrl: APP_CONST.dTemplate + 'mixedchart.html',
      restrict: 'E',
      scope: {
        info: '=?'
      },
      controller: ['$rootScope', "$scope", function ( $rootScope, $scope ) {
        $scope.labels = $scope.info.data.label;

        $scope.data = $scope.info.data.value;
        $scope.data.push( $scope.info.data.value2[0] );

        $scope.datasetOverride = [];

        var dataset1 = []
          , dataset2;

        angular.forEach( $scope.info.data.datasets, function (value, key) {
          var color = $rootScope.getRgba($rootScope.getRandomColor());
          dataset1.push({
            yAxisID: 'y-1',
            label: value.label,
            type: value.type
          });
        });

        var maxVal = 0;
        angular.forEach( $scope.info.data.value2[0], function (value) {
          if (value > maxVal) maxVal = value;
        });

        angular.forEach( $scope.info.data.datasets2, function (value, key) {
          var color = $rootScope.getRgba($rootScope.getRandomColor());
          dataset2 = {
            yAxisID: 'y-2',
            label: value.label,
            type: value.type
          };
        });

        $scope.datasetOverride = dataset1;
        if ( dataset2 )
          $scope.datasetOverride.push( dataset2 );

        $scope.options =
        {
          responsive: true,
          maintainAspectRatio: false,
          elements: {
            line: {
              fill: false,
              tension: 0
            }
          },
          scales:{
            xAxes: [{
              stacked: true,
              scaleLabel: {
                display: false,
                labelString: 'Tahun'
              }
            }],
            yAxes: [
            {
              id: 'y-1',
              stacked: true,
              scaleLabel: {
                display: true,
                labelString: $scope.info.data.labely1
              },
              ticks: {
                max: 100
              }
            },
            {
              id: 'y-2',
              type: 'linear',
              position: 'right',
              scaleLabel: {
                display: true,
                labelString: $scope.info.data.labely2
              },
              ticks: {
                max: maxVal,
                min: 0
              }
            }
            ]
          },
          "legend": {
            "display": false,
            "position": "bottom",
            "labels": {
              "fontSize": 12,
              generateLabels: function(chart) {
                var data = chart.data;
                return Chart.helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
                  var fillStyle = (!Chart.helpers.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]);
                  if (!dataset.label) fillStyle = Chart.helpers.color().alpha(0).rgbString();

                  return {
                    text: dataset.label !== null ? dataset.label : '',
                    fillStyle: fillStyle,
                    hidden: !dataset.label,
                    lineCap: dataset.borderCapStyle,
                    lineDash: dataset.label !== null ? dataset.borderDash : undefined,
                    lineDashOffset: dataset.label !== null ? dataset.borderDashOffset : undefined,
                    lineJoin: dataset.label !== null ? dataset.borderJoinStyle : undefined,
                    lineWidth: dataset.label !== null ? dataset.borderWidth : 0,
                    strokeStyle: dataset.label !== null ? dataset.borderColor : undefined,
                    pointStyle: dataset.label !== null ? dataset.pointStyle : undefined,
                    datasetIndex: i
                  };
                }, this) : [];
              }
            }
          },
          "tooltips": {
            mode: 'label',
            callbacks: {
              labels: function(tooltipItem, data) {
                return tooltipItem.yLabel;
              }
            }
          }
        };

        $rootScope.$on("fullscreenEnabled", function (event, data) {
          if ($scope.options.legend) {
            $scope.options.legend.display = true;
          }
        });

        $rootScope.$on("fullscreenDisabled", function (event, data) {
          if ($scope.options.legend) {
            $scope.options.legend.display = false;
          }
        });
      }]
    };
  }]);

piechart.html

<div class="pie-container">
  <canvas class="chart chart-pie"
          chart-data="data" chart-labels="labels" chart-options="options"
          chart-colors="color"
          height="125" width="125">
  </canvas>
</div>

piechart.js

'use strict';

/**
 * @ngdoc directive
 * @name dashboardWk.directive:pieChart
 * @description
 * # pieChart
 */
angular.module('dashboardWk')
  .directive('pieChart', ["APP_CONST", function ( APP_CONST) {
    return {
      templateUrl: APP_CONST.dTemplate + 'piechart.html',
      restrict: 'E',
      scope: {
        info: '=?'
      },
      controller: ['$scope', function( $scope ) {
        $scope.labels = $scope.info.data.label;
        $scope.data  = $scope.info.data.value;
        $scope.color = [ '#fb6c6e', '#48b5af', '#a48bcd', '#67c2d7', '#fcc707' ];
        $scope.options = {
          responsive: true,
          maintainAspectRatio: false,
          tooltipEvents: [],
          showTooltips: true,
          tooltipCaretSize: 0,
          onAnimationComplete: function () {
            this.showTooltip(this.segments, true);
          },
          legend: {
            "display": true,
            "position": "bottom",
            "fontSize": 8
          },
          tooltips: {
            callbacks: {
              label: function(tooltipItem, data) {
                var allData = data.datasets[tooltipItem.datasetIndex].data;
                var tooltipLabel = data.labels[tooltipItem.index];
                var tooltipData = allData[tooltipItem.index];
                var total = 0;
                angular.forEach( allData, function (value, key) {
                  total += value;
                });
                var tooltipPercentage = Math.round((tooltipData / total) * 100);
                return tooltipLabel + ': ' + tooltipData + ' (' + tooltipPercentage + '%)';
              }
            }
          }
        };
      }]
    };
  }]);