title: Set colour of google bar chart via role:style
body: <p>From a dynamically generate data array I am creating a DataTable and want to style it in a google charts as a bar chart.
  I am going thru every data entry and creating a label and annotation.</p>
  
  <p><strong>But how do I give the column a certain colour?</strong></p>
  
  <p>I figured out that I need to use the role "style" but could not figure out the right syntax for the colour.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dataTable = google.visualization.arrayToDataTable(data);
          //Formatters
          var intergerFormatter = new google.visualization.NumberFormat({
              groupingSymbol: ",",
              fractionDigits: 0
          });
          for (var i = 0; i &lt; data[0].length; i++) {
              intergerFormatter.format(dataTable, i);
          }
  
          var view = new google.visualization.DataView(dataTable);
          var cols = [0];
          for (var i = 1; i &lt; data[0].length; i++) {
              cols.push({
                  sourceColumn: i,
                  type: "number",
                  label: data[0][i]
              });
              cols.push({
                  calc: "stringify",
                  sourceColumn: i,
                  type: "string",
                  role: "annotation"
              });
              cols.push({
                  //the following options are not working...
                  role: "style: green"
                  'color: green'
                  color: "#109618"
              });
          }
          view.setColumns(cols);
          var chart = new google.visualization.ColumnChart(document.getElementById('PTCoverage'));
          chart.draw(view, options);</code></pre>
  </div>
  </div>
  </p>