How to change the bar color in a Google column chart?

Question

I created a column chart using Google's Chart API. It's similar to the Sales and expenses one they have at: https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

What I can't figure out from the documentation is how to change the "Expenses" column to another color. I see where they've changed column colors when the items are unique, but not when they're part of a series.

I tried using { role: 'style' } in JS Fiddler but can't get it to work so I'm guessing I'm putting it in the wrong place.

Thanks in advance

Answer 1 · 2014-08-13T22:32:15Z

August 13, 2014 10:32pm

Hi Anne,

You can find out how to change this if you look at the "series" property in the "Configuration Options" table here: https://developers.google.com/chart/interactive/docs/gallery/columnchart#Configuration_Options

I don't know if you already have an options object set up but you would add the "series" property to it and then set it to whichever things you need to change as shown in that table.

I saved the fiddle example they have there showing how to change the color on the 2nd series "Expenses" to lightgray

http://jsfiddle.net/0khxgLj5/

The code shows both ways to specify the series value.

Nested objects - series: { 1: {color: 'lightgray'} }

Or an array of objects - series: [ {}, {color: 'lightgray'} ] Here you need an empty object in the first spot to indicate default values for the blue series.

Let me know if you have any questions about this.

Answer 2 · 2014-08-13T22:52:32Z

August 13, 2014 10:52pm

Jason,

thanks your Fiddler example was what I needed. I was unclear where I needed to add the color line. Much appreciated.

Welcome to the Treehouse Community

Looking to learn something new?

Anne Hennegar

Anne Hennegar

How to change the bar color in a Google column chart?

2 Answers

Jason Anello

Jason Anello

Anne Hennegar

Anne Hennegar