Google Charts - Change individual bar color
Here is a code sample that changes the color. Note that the "colors" option accepts an array of strings.
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
colors: ['red','green'],
is3D:true
};
As Naveen suggested, you should add another series in order to make it use a different colour, however if you add isStacked: true
to your options it will draw bars on top of each other instead of next to each other and won't change their width or alignment, so it looks good. Try this:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'SalesMax');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 0);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 0);
/* NEED TO MAKE THIS BAR RED? */
data.setValue(2, 0, '2006');
data.setValue(2, 1, 0);
data.setValue(2, 2, 1400);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 0);
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data, {isStacked: true, width: 400, height: 240, title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
});
}
Refer to https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors
You can add { role: 'style' } to your data table. For all the columns that you want to have the same color, just specify an empty style ''. Then, on the column you want to be red, you could just specify 'red' or '#ff0000' or 'color: red', etc.
// example from Google
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333'], // RGB value
['Silver', 10.49, 'silver'], // English color name
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
]);