title: Defining a task color for each row in Angular-Gantt
body: <p>I am using angular-gantt to represent  a series of tasks and I would like to have the tasks of a specific row with a specific color.
  To add to this I have added the modules gantt-movable and gant-draw-task.</p>
  
  <p>I know how to fix the color of a task at the start but not how to modify it according to the row in which the task is in.</p>
  
  <p>Thank you for any pointers.</p>
  
  <p>EDIT:</p>
  
  <p>Ctrl</p>
  
  <pre><code>    (function () {
  'use strict';
  
  angular.module('Dashboard.pages.devices.planning')
      .controller('PlanningGanttCtrl', PlanningGanttCtrl);
  
  function PlanningGanttCtrl($scope,$sessionStorage) {
  
  
      $scope.data=$sessionStorage.planning[$scope.dayNumber];
  
  
      $scope.headersFormats = {
          day: 'D',
          hour: 'H',
          minute:'HH:mm'
      };
  
  
      $scope.data = [
          {name: '20°C', tasks: [
              {name: '', color: '#F1C232', from: new Date(2013, 10, 5, 0, 0, 0), to: new Date(2013, 10, 5, 6, 0, 0) }
          ]},
          {name: '19°C', tasks: [
              {name: '', color: '#F1C232', from: new Date(2013, 10, 5, 7, 0, 0), to: new Date(2013, 10, 5, 10, 0, 0)}
          ]},
          {name: '18°C', tasks: [
              {name: '', color: '#F1C232', from: new Date(2013, 10, 5, 10, 0, 0), to: new Date(2013, 10, 5, 12, 0, 0)}
          ]},
          {name: '17°C', tasks: [
              {name: '', color: '#F1C232', from: new Date(2013, 10, 5, 12, 0, 0), to: new Date(2013, 10, 5, 15, 0, 0)}
          ]}
      ];
  
      $scope.drawTaskFactory = function() {
          var newTask = {
              id: 5,
              name: 'New Task'
              // Other properties
          };
  
          return newTask;
      }
  }
  })();
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>&lt;div gantt data=data headers="['hour']" headers-format="headersFormats" task-out-of-range="expand" expand-to-fit="true" &gt;
      &lt;gantt-table&gt;&lt;/gantt-table&gt;
      &lt;gantt-movable&gt;&lt;/gantt-movable&gt;
      &lt;gantt-tooltips&gt;&lt;/gantt-tooltips&gt;
      &lt;gantt-resize-sensor&gt;&lt;/gantt-resize-sensor&gt;
      &lt;gantt-draw-task enabled="true" task-factory="drawTaskFactory" move-threshold="4"&gt;&lt;/gantt-draw-task&gt;
    &lt;gantt-overlap enabled="false" global="true"&gt;&lt;/gantt-overlap&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the directive even if I don't believe it is useful,</p>
  
  <pre><code>(function () {
  'use strict';
  
  angular.module('Dashboard.pages.devices.planning')
      .directive('planningGantt', planningGantt);
  
  /** @ngInject */
  function planningGantt() {
      return {
          restrict: 'E',
          controller: 'PlanningGanttCtrl',
          templateUrl: 'app/pages/devices/planning/planningGantt/planningGantt.html',
          scope: {
              dayNumber: '=info'
          },
      };
  }
  })();
  </code></pre>