Google Stacked Bar Chart Color Chart

Question

How to change the color of a column in a bar chart broken down by glass? If I specify a color attribute in my MakeBarChart function, it only accepts the first parameter. And makes other columns an easier version of this color. Here's what it looks like:

And this is the code;

function MakeBarChart(tmpData) { var barArray = []; barArray.push(['', 'Open', 'Wachten', 'Opgelost']); for (key in tmpData) { if (tmpData.hasOwnProperty(key)) { barArray.push(['Week' + key, tmpData[key]['active'], tmpData[key]['waiting'], tmpData[key]['closed']]) } } var data = google.visualization.arrayToDataTable( barArray ); var options = { chart: { title: 'Incidenten per week', subtitle: '', 'width':450, 'height':300, }, bars: 'vertical', // Required for Material Bar Charts. 'backgroundColor':{ fill:'transparent' }, isStacked: true, colors:['#000','#1111','#55555'] }; var chart = new google.charts.Bar(document.getElementById('barchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } 

How can I make the columns have their own separate color.

Answer 1

The problem is your color values, they are not in the correct RGB format.

The correct values ​​will be:
either RGB hexadecimal values ​​(with a 2-digit hexadecimal value for each color), such as "# 00CC88" or
either hexadecimal RGB values ​​(with a 1-digit hexadecimal value for each color), for example, "# 0C8" or
or a valid color name.

therefore instead

 colors:['#000','#1111','#55555'] // wrong values (2nd and 3rd values) 

try

 colors:['#11AA77','#999922','#550077'] 

or

 colors:['#1A7','#992','#507'] 

or you can also do

 colors:['red','darkgreen','yellow'] 

See jsfiddle example: https://jsfiddle.net/rdtome/2vjLc0q0/