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?

Answer 1

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);
    }

Answer 2

I have the same problem, in this case I think is a bug related with isStacked option, if this option is set to true the material bar chart will take the colour palette as a gradient from the first element of the array.

But if you set that option to false, you will have access to all the array of colours. But the data will not be stacked. colors: ['#b0120a', '#ffab91'].