Google Charts - Change the color of bars
Solution 1
[Edit - there is a better method outlined in edit below]
The Visualization API colors data by series (or column in the DataTable, if you prefer). The solution is to split the data into multiple series using a DataView:
// get a list of all the labels in column 0
var group = google.visualization.data.group(data, [0], []);
// build the columns for the view
var columns = [0];
for (var i = 0; i < group.getNumberOfRows(); i++) {
var label = group.getValue(i, 0);
// set the columns to use in the chart's view
// calculated columns put data belonging to each label in the proper column
columns.push({
type: 'number',
label: label,
calc: (function (name) {
return function (dt, row) {
return (dt.getValue(row, 0) == name) ? dt.getValue(row, 1) : null;
}
})(label)
});
}
// create the DataView
var view = new google.visualization.DataView(data);
view.setColumns(columns);
Set the "isStacked" option in the chart to "true" to fix the column spacing issues that result, and draw the chart using the view instead of the DataTable:
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(view, {
// options
isStacked: true
});
See an example here.
[Edit: new (improved) method available with update to the Visualization API]
You can now use the new "style" column role to specify styles for your columns. It works like this:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['Foo', 5, 'color: #ac6598'],
['Bar', 7, 'color: #3fb0e9'],
['Baz', 3, 'color: #42c698']
]);
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
legend: {
position: 'none'
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
see example here: http://jsfiddle.net/asgallant/gbzLB/
Solution 2
There is a solution for your problem.You need to add series
in your options. I have already answered for the similar type of question. Refer my answer here. I hope this will help you.
Etienne Noël
Updated on July 25, 2022Comments
-
Etienne Noël almost 2 years
I want to change the color of each bar in my bar graph. Currently, I tried setting the colors option as specified in the documentation:
var options = { 'title' : results.title, 'width' : 400, 'height' : 300, 'is3D' : true, 'colors' : ["#194D86","#699A36", "#000000"], 'allowHtml' : true }
But it does not work. Basically, I would want each bar in the following graph to be the same color: http://jsfiddle.net/etiennenoel/ZThMp/12/
Is there a way to do that or do I have to change my code structure to do so ?
-
David Masters over 10 yearsThis looks interesting, but I want to specifically colour certain bars...could you post an example of that if it's achievable?
-
asgallant over 10 yearsThere is actually a new way to do this, as of last week's major revisions: you can use the "style" column role to specify colors. See example here: jsfiddle.net/asgallant/gbzLB. I'll update my answer with the new method.