title: Change the bar color in gantt chat based on value
body: <p>I would like to change the color of the bar in the gantt chart based in the value I am passing. When <code>Percent done</code> equals of higher than 100 the bar should be red. Is it possible?</p>
  
  <p><a href="https://jsfiddle.net/1cez1duf/" rel="nofollow noreferrer">https://jsfiddle.net/1cez1duf/</a></p>
  
  <pre><code>google.charts.load('current', {'packages':['gantt'], 'language': 'pt-br'});
  google.charts.setOnLoadCallback(drawChart);
  
  function drawChart() {
  
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent done');
      data.addColumn('string', 'Dependencies');
  
      data.addRows([    
          ['C10', 'C10', 'Xa', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 109, null],
          ['C15', 'C15', 'Xa', new Date(2016, 5, 2), new Date(2016, 9, 31), null, 111, null],
          ['C20', 'C20', 'Xa', new Date(2016, 8, 15), new Date(2016, 10, 25), null, 88, null],
          ['C21', 'C21', 'Xa', new Date(2016, 8, 1), new Date(2016, 10, 25), null, 90, null]
      ]);
  
      var options = {
          width: "100%",
          hAxis: {
              textStyle: {
                  fontName: ["Roboto Condensed"]
              }
          },
          gantt: {
              labelStyle: {
                  fontSize: 12,
                  color: '#757575'
              }
          }
      };
  
      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
      chart.draw(data, options);
  }
  </code></pre>