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?

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?

• javascript
• charts
• material-design

Share Improve this question Follow asked Apr 29, 2015 at 5:49 Kenny WylandKenny Wyland 21.9k2626 gold badges126126 silver badges249249 bronze badges 1

• The colors option seems to be working for me here – segFault Commented Dec 29, 2015 at 14:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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/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./chart/interactive/docs/gallery/barchart#configuration-options

I was able to get the colors working here

When generating the graph I had to use: new google.visualization.ColumnChart(...) instead of new google.charts.Bar(...) otherwise it would not stack properly.

---

You may also want to make sure you are using the latest version of Google Charts. In the fiddle above, I used samples from the developer docs which were using: https://www.google./jsapi to autoload all the things.