Changing Google Stacked Bar Chart colors (Material Bar Chart)

Question

var data = google.visualization.arrayToDataTable(stats_data);

var options = {
    width: 1400,
    height: 400,
    legend: { position: 'top', maxLines: 3 },
    bar: { groupWidth: '75%' },
    isStacked: true,
    bars: 'vertical',
    colors:['#999','#346ac9', '#279423', '#fc9826'],
};

var chart = new google.charts.Bar(document.getElementById('chart-recent'));
chart.draw(data, google.charts.Bar.convertOptions(options));

I've got a stacked bar chart and I want each of the colors to be different (grey, blue, green, orange). However, the colors of the sections just take the first color (grey) in multiple brightnesses.

I also tried this in my options:

series: [
    {color: '#999'},
    {color: '#346ac9'},
    {color: '#279423'},
    {color: '#fc9826'}
]

How do I get each of the series to have a different color?

Answer 1

At the time of the original question, the Material Bar Chart probably did not yet support custom colors for stacked bar charts.

Today, the series configuration option as an array of color objects seems to work fine. See the colors variable in the example below.

Example code:

const data = [
   ['Sector',        'High', 'Medium', 'Low' ],
   ['Agriculture',   18,  9, 29],
   ['Education',      2, 14, 10],
   ['Healthcare',     4,  6, 41],
   ['Manufacturing', 36, 10,  3]
   ];
const colors = [
   { color: 'indianred' },  //high
   { color: 'khaki' },      //medium
   { color: 'seagreen' },   //low
   ];

const drawChart = () => {
   const options = {
      chart:   { title: 'Risk by sector' },
      legend:  { position: 'top' },  //not yet supported
      bars:    'horizontal',
      stacked: true,
      series:  colors
      };
   const chartData = google.visualization.arrayToDataTable(data);
   const elem = $('figure#health-chart')[0];
   const chart = new google.charts.Bar(elem);
   chart.draw(chartData, options);
   };

google.charts.load('current', { packages: ['bar'] });
google.charts.setOnLoadCallback(drawChart);

Resulting chart:

Fiddle with the code:
https://jsfiddle.net/p8bnfe2h

Configuration options

series
An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used.

Documentation:
https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options