Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 557
joost Avatar asked May 18 '15 08:05

joost


People also ask

How do you change the color of a stacked bar graph?

In a chart, click to select the data series for which you want to change the colors. On the Format tab, in the Current Selection group, click Format Selection. tab, expand Fill, and then do one of the following: To vary the colors of data markers in a single-series chart, select the Vary colors by point check box.

How do I change the color of my Google bar graph?

To change the colors assigned to data series in a specific chart: Select that chart, then on the right, open the STYLE tab. In the Color by section, select Series order, Bar order, or Slice order, depending on the type of chart. Click a color box to set the color for each series.

How do I change the color of a stacked column?

You can drag the colored column to legend, it will auto change these bars to different colors.

What is the purpose of color on a stacked bar chart?

Choosing effective colors While the general recommendation is to stick with a single color in a standard bar chart, use of color to distinguish secondary variable levels is an inevitability for a stacked bar chart.


1 Answers

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/

like image 121
rtome Avatar answered Oct 04 '22 06:10

rtome