Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Charts - Change individual bar color

With Google Charts bar graph, is it possible to to change the color of one bar. For example I'd like to make the 2006 data red (other bars are blue).

 function drawVisualization() {             // Create and populate the data table.             var data = new google.visualization.DataTable();             data.addColumn('string', 'Year');             data.addColumn('number', 'Sales');              data.addRows(4);             data.setValue(0, 0, '2004');             data.setValue(0, 1, 1000);              data.setValue(1, 0, '2005');             data.setValue(1, 1, 1170);    /* NEED TO MAKE THIS BAR RED? */             data.setValue(2, 0, '2006');             data.setValue(2, 1, 1400);              data.setValue(3, 0, '2007');             data.setValue(3, 1, 1030);               chart = new google.visualization.BarChart(document.getElementById('visualization'));             chart.draw(data, {width: 400, height: 240, title: 'Company Performance',                               vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}                              }); } 
like image 626
FattyPotatoes Avatar asked May 15 '12 00:05

FattyPotatoes


People also ask

How do I change the color of one bar in Google Sheets?

Select a data series. Click Color . Pick an option to set the color of the bars. Select Left axis or Right axis to move the axis labels.

Can you change the color of individual bars in Excel?

On a chart, select the individual data marker that you want to change. On the Format tab, in the Shape Styles group, click Shape Fill. Do one of the following: To use a different fill color, under Theme Colors or Standard Colors, click the color that you want to use.


Video Answer


1 Answers

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 }; 
like image 76
user1586747 Avatar answered Sep 20 '22 14:09

user1586747