angular.module('yds').directive('ydsDashboardVisualization', ['DashboardService', '$ocLazyLoad', '$timeout',
    function(DashboardService, $ocLazyLoad, $timeout) {
        return {
            restrict: 'E',
            scope: {
                projectId: '@',     // Project ID of chart
                dashboardId: '@',   // ID used for getting selected year range from DashboardService
                addToBasket: '@',   // If true, the save to basket button will appear in visualizations
                elementH: '@'       // Height of component
            },
            templateUrl: ((typeof Drupal != 'undefined') ? Drupal.settings.basePath + Drupal.settings.yds_project.modulePath +'/' : '') + 'templates/dashboard-visualization.html',
            link: function (scope, element, attrs) {
                var dashboardId = scope.dashboardId;

                // Check if the component's height attribute is defined, else assign default value
                if (_.isUndefined(scope.elementH) || scope.elementH.trim() == "")
                    scope.elementH = 300;

                // Set minimum height of details panel body
                scope.panelBodyStyle = {
                    "min-height": (parseInt(scope.elementH) + 30) + "px"
                };

                // If dashboardId is undefined, show error
                if (_.isUndefined(dashboardId) || dashboardId.trim() == "") {
                    dashboardId = "default";
                }

                scope.selectedVis = "";

                // Set the first type as default selected one
                scope.selProjectId = scope.projectId;
                scope.selViewType = "";

                // Variables for previous values, to check that something really changed before re-rendering component
                var prevViewType = "";
                var updateVis = false;

                /**
                 * Re-render the selected visualization
                 */
                var updateVisualization = function() {
                    if (updateVis) {
                        var selectedVis = "bar";
                        if (scope.selectedVis.length > 0) {
                            selectedVis = scope.selectedVis;
                        }

                        // Make selectedVis empty in order for the component to re-render
                        scope.selectedVis = "";

                        // Postpone to end of digest queue
                        $timeout(function() {
                            scope.selectVis(selectedVis);

                            updateVis = false;
                        });
                    }
                };

                /**
                 * Update the view type from the DashboardService
                 * Also sets the Visualization panel's color
                 */
                var updateViewType = function() {
                    prevViewType = scope.selViewType;
                    var viewType = DashboardService.getViewType(dashboardId);

                    if (!_.isUndefined(viewType) && !_.isEqual(prevViewType, viewType.type)) {
                        scope.selViewType = viewType.type;
                        scope.panelStyle = viewType.panelStyle;
                        scope.panelHeadingStyle = _.omit(viewType.panelHeadingStyle, "min-height");

                        updateVis = true;
                    }
                };

                /**
                 * Handles view type selection changes
                 */
                var viewTypeChangeHandler = function() {
                    updateViewType();
                    updateVisualization();
                };

                // Subscribe to year selection and view type changes
                DashboardService.subscribeViewTypeChanges(scope, viewTypeChangeHandler);

                /**
                 * Change selected visualization type
                 * @param visType
                 */
                scope.selectVis = function(visType) {
                    scope.selectedVis = visType;
                };

                // Initialize component
                viewTypeChangeHandler();
            }
        };
    }
]);

@@ -487,16 +487,131 @@
 zations%0A
+                disableColor: '@',  // If true, the component will ignore the color of the selected aggregate type%0A
         
@@ -961,16 +961,71 @@
 boardId;
+%0A                var disableColor = scope.disableColor;
 %0A%0A      
@@ -1265,180 +1265,167 @@
  // 
-Set minimum height of details panel body%0A                scope.panelBodyStyle = %7B%0A                    %22min-height%22: (parseInt(scope.elementH) + 30) + %22px%22%0A                %7D
+If dashboardId is undefined, show error%0A                if (_.isUndefined(dashboardId) %7C%7C dashboardId.trim() == %22%22)%0A                    dashboardId = %22default%22
 ;%0A%0A 
@@ -1442,34 +1442,35 @@
      // If d
-ashboardId
+isableColor
  is undefine
@@ -1522,95 +1522,295 @@
 ed(d
-ashboardId) %7C%7C dashboardId.trim() == %22%22) %7B%0A                    dashboardId = %22default%22;
+isableColor) %7C%7C (disableColor != %22true%22 && disableColor != %22false%22))%0A                    disableColor = %22false%22;%0A%0A                // Set minimum height of details panel body%0A                scope.panelBodyStyle = %7B%0A                    %22min-height%22: (parseInt(scope.elementH) + 30) + %22px%22
 %0A   
@@ -1815,32 +1815,33 @@
                %7D
+;
 %0A%0A              
@@ -3527,24 +3527,83 @@
 wType.type;%0A
+%0A                        if (disableColor != %22true%22) %7B%0A    
             
@@ -3654,16 +3654,20 @@
 lStyle;%0A
+    
         
@@ -3757,16 +3757,42 @@
 eight%22);
+%0A                        %7D
 %0A%0A      

Add disable-color attribute to Dashboard Visualization