Changing colors on google material bar chart

Question

I am using google's new Material Bar Charts to display a graph with a chart.title and chart.subtitle option but am not able to change the colors. What I am trying to achive is

http://jsfiddle.net/8pjuz38c/1/

But the closest thing I get is:

http://jsfiddle.net/8pjuz38c/5/

Why aren't the colors applied to the series?

Probably a bug or they still haven´t made that available for material charts, maybe @asgallant has some insight — juvian
Nope, no luck so far, let me know if you come across a solution. — Nenad
The page mentions that their Material Design bar chart is used to "support a common look and feel across its properties", so I think they are forcing their palette color choices. — jlee-tessik
I don't understand what you wanted to do at all. if jsfiddle #1 works why you need jsfiddle #5 ? If you just want to select the color see my update at jsfiddle #47 — Curious Sam

Marc van Nieuwenhuijzen Marc van Nieuwenhuijzen · Accepted Answer · 2015-04-22T09:52:34

Material barchart vs. barchart

You are confusing a 'material barchart' with a normal 'barchart'. The method you used for coloring the bars is the method to use for the normal barchart. Not the material one.

The difference

Compare the lines of codes underneath.

Normal barchart

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>

and

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

Material barchart

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>

and

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

Previous answer (relates to a material bar chart with mulitipe bars per item)

Add the colors attribute to the option object.

Example:

var options = {
        title: 'Population of Largest U.S. Cities',
        colors: ['#b0120a', '#ffab91']
      };

So the code in de jsFiddel as shown above should be:

It's working for me in je jsFiddle. Make sure your code is like this:

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawBarColors);

function drawBarColors() {
      var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population', '2000 Population'],
        ['New York City, NY', 8175000, 8008000],
        ['Los Angeles, CA', 3792000, 3694000],
        ['Chicago, IL', 2695000, 2896000],
        ['Houston, TX', 2099000, 1953000],
        ['Philadelphia, PA', 1526000, 1517000]
      ]);

      console.log(google.visualization.arrayToDataTable);

      var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        colors: ['#b0120a', '#ffab91'],
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        }
      };
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Changing colors on google material bar chart

2 Answers

Material barchart vs. barchart

The difference

Previous answer (relates to a material bar chart with mulitipe bars per item)