Google Bar Chart cannot Change Individual Bar Color

Question

I've created a google bar chart using the Google Visualization API and I'm trying to add a column which will be used for style. Here's my implementation below using the .addcolumn() and then adding the color field to each row, however each bar is still the default blue color.

<script type="text/javascript">
// Runs onload to build the first default chart and load the bar chart package
var jsonCoachCount;
window.onload = function(){
    jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"},  {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"Learn@UW"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]');

// Load the Visualization API and the barchart package.
    google.charts.load('current', {'packages': ['bar']});
// Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

};
function drawChart(){

    var servicesData = new google.visualization.DataTable();

    servicesData.addColumn('string', 'Service');
    servicesData.addColumn('number', 'Number of Coaches');
    servicesData.addColumn({type:'string', role:'style'});

    for(i = 0; i < jsonCoachCount.length; i++){
        tempArray =[];
        tempArray.push(String (jsonCoachCount[i]['Name']),
                parseInt(jsonCoachCount[i]['Service_Count']),
                'color:Red');
        servicesData.addRow(tempArray);
    }

    var options = {
        backgroundColor: {
            fill: '#E8E4D8'
        },
        legend: { position: 'none' },
        titleTextStyle:{
            bold: 'true'
        },
        chart: {
            title: 'Coaches by Service',
            subtitle: 'Coaches by Services: From 2016-09-10 until Today'
        },
        bar: {
            groupWidth: '60%'
        },
        'hAxis': {
            textStyle: {
                fontSize: 11
            }
        }
    };

    var chart = new google.charts.Bar(document.getElementById('servicesChart'));

    chart.draw(servicesData, google.charts.Bar.convertOptions(options));

}
<html>

<head>
<script type="text/javascript"     src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>

</body>

</html>

I'm not sure where I'm going wrong or if I've misunderstood a piece of the documentation. I'd appreciate help for changing the color of the bars on my bar chart, thanks!

WhiteHat WhiteHat · Accepted Answer · 2016-04-06T13:26:02

each color in the colors option is applied to each series / y-axis column in the data table.
if there is only one y-axis column, only one color will be applied.

Otherwise, a Style Column Role is the easiest way to color an individual bar.
However, it does not work on Material Charts.

For options, see example charts...

Chart 1 = Material Chart
Chart 2 = Core Chart
Both built the same way with various style settings
Works on Core, not on Material

If you are fine with each bar being the same color...

Chart 3 = Material Chart
Uses colors configuration option to change the color to red
Only one series exists, so accepts only one color

If you must have Material Chart with separate colors for each bar...

Chart 4 = Material Chart
Each value is added as a column, instead of a row, creating multiple series
Uses colors configuration option to change color for each bar
series option can also be used here
However, much harder to work with, notice Spacer column and lack of hAxis labels...

google.charts.load('current', {
  callback: init,
  packages: ['bar', 'corechart']
});

function init() {
  var jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"},  {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"Learn@UW"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]');

  var options = {
      backgroundColor: {
          fill: '#E8E4D8'
      },
      legend: { position: 'none' },
      titleTextStyle:{
          bold: 'true'
      },
      chart: {
          title: 'Coaches by Service',
          subtitle: 'Coaches by Services: From 2016-09-10 until Today'
      },
      bar: {
          groupWidth: '60%'
      },
      hAxis: {
          textStyle: {
              fontSize: 11
          }
      }
  };

  drawChart();
  drawSeriesChart();

  function drawChart() {
      var servicesData = new google.visualization.DataTable();

      servicesData.addColumn('string', 'Service');
      servicesData.addColumn('number', 'Number of Coaches');
      servicesData.addColumn({type:'string', role:'style'});

      for (i = 0; i < jsonCoachCount.length; i++) {
          var tempArray =[];
          var tempColor;
          switch (i) {
            case 0:
              tempColor = 'color:Red';
              break;

            case 1:
              tempColor = 'orange';
              break;

            case 2:
              tempColor = 'fill-color: gold;';
              break;

            case 3:
              tempColor = 'bar {color: green;}';
              break;

            case 4:
              tempColor = 'bar {fill-color: blue;}';
              break;

            default:
              tempColor = 'bar {fill-color: cyan; stroke-color: black; stroke-width: 4;}';
          }
          tempArray.push(
            String (jsonCoachCount[i]['Name']),
            parseInt(jsonCoachCount[i]['Service_Count']),
            tempColor
          );
          servicesData.addRow(tempArray);
      }

      var chart = new google.charts.Bar(document.getElementById('servicesChart1'));
      chart.draw(servicesData, google.charts.Bar.convertOptions(options));

      var chart = new google.visualization.ColumnChart(document.getElementById('servicesChart2'));
      chart.draw(servicesData, options);

      // only one series exists -- only one color will work
      options.colors = ['red'];
      var chart = new google.charts.Bar(document.getElementById('servicesChart3'));
      chart.draw(servicesData, google.charts.Bar.convertOptions(options));
  }

  function drawSeriesChart() {
      var servicesData = new google.visualization.DataTable();

      servicesData.addColumn('string', 'Service');
      for (i = 0; i < jsonCoachCount.length; i++) {
        servicesData.addColumn('number', String (jsonCoachCount[i]['Name']));
        servicesData.addColumn('number', 'Spacer');
      }

      var tempArray = [];
      tempArray.push('Number of Coaches');
      for (i = 0; i < jsonCoachCount.length; i++) {
        tempArray.push(parseInt(jsonCoachCount[i]['Service_Count']));
        tempArray.push(null);
      }
      servicesData.addRow(tempArray);

      options.colors = [
        'deeppink',
        'red',
        'orange',
        'gold',
        'green',
        'blue',
        'indigo',
        'purple',
        'violet',
        'pink'
      ];

      var chart = new google.charts.Bar(document.getElementById('servicesChart4'));
      chart.draw(servicesData, google.charts.Bar.convertOptions(options));
  }
}

div {
  padding: 2px 0px 2px 0px;
  font-weight: bold;
}

.code {
  background-color: lightgray;
  font-family: Courier New;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>1. Material Chart</div>
<div id="servicesChart1"></div>
<div>2. Core Chart</div>
<div id="servicesChart2"></div>
<div>3. Material Chart with <span class="code">colors: ['red']</span></div>
<div id="servicesChart3"></div>
<div>4. Multi-Series Material Chart</div>
<div id="servicesChart4"></div>

Google Bar Chart cannot Change Individual Bar Color

1 Answers