CODEWITHSUNDEEP
javascripthtmlgoogle-visualization
joost
joost

Reputation: 131

Google Stacked Bar Chart color

How can I change the color of the column in a stacked bar chart? If I specify the colors attribute in my MakeBarChart function, it only takes the first parameter. And makes the other columns a lighter version of that color. This is what it looks like;

image

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 column all have their own separate color.

Upvotes: 6

Views: 990

Answers (1)

rtome
rtome

Reputation: 1993

The problem is with your colors values, they are not in a correct RGB format.

Correct values will be :
either RGB hex values (with 2 digit hex value per color) like '#00CC88' or
either RGB hex values (with 1 digit hex value per color) like '#0C8' or
or a valid color name.

so instead of 

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 a jsfiddle example here : https://jsfiddle.net/rdtome/2vjLc0q0/

Upvotes: 3

Related Questions