Gantt Chart - Bar Colors

Dane Griffin

unread,

Aug 7, 2015, 4:37:07 AM8/7/15

to Google Visualization API

Hello

Can anyone tell me if it is possible to customize the color of individual bars in the gantt chart, or atleast edit the overall color scheme?

With Thanks in Advance

Dane

Asad Syed

unread,

Mar 31, 2016, 10:44:16 AM3/31/16

to Google Visualization API

Did you find the answer? I am also having the same issue where I cannot change the color of individual bars or the percentage fill color. Any help is appreciated.

Thanks,

Asad

Eric Defore

unread,

Jun 15, 2016, 8:37:27 AM6/15/16

to Google Visualization API

I ended up opening an Issue on the GitHub Issue tracker for this quite a while back and it got no attention, unfortunately.

Having it default to automatically choosing colors like it is now but letting us provide an Array of colors to cycle through as an Option would be super ideal.

talal muhammad

unread,

Nov 7, 2016, 4:08:11 PM11/7/16

to Google Visualization API

Hi Eric,

Any luck with this issue?....

Eric Defore

unread,

Nov 7, 2016, 4:16:37 PM11/7/16

to Google Visualization API

Unfortunately no :/ I think I've had Google only reply to one of my GitHub Issues so far. Many just go unnoticed.

Here's the Issue if you want to try to bump it/bring attention to it: https://github.com/google/google-visualization-issues/issues/2199

Eric Defore

unread,

Feb 20, 2018, 2:58:24 PM2/20/18

to Google Visualization API

I ended up looking into this again and checked the source code for Gantt Charts and I'm not sure if it was there before or not, but there's now a currently undocumented Option called

gantt.palette

Which holds an Array of Objects that the Gantt Chart cycles through when assigning colors. Here's the values currently being used:

[
  {
    "color": "#5e97f6",
    "dark": "#2a56c6",
    "light": "#c6dafc"
  },
  {
    "color": "#db4437",
    "dark": "#a52714",
    "light": "#f4c7c3"
  },
  {
    "color": "#f2a600",
    "dark": "#ee8100",
    "light": "#fce8b2"
  },
  {
    "color": "#0f9d58",
    "dark": "#0b8043",
    "light": "#b7e1cd"
  },
  {
    "color": "#ab47bc",
    "dark": "#6a1b9a",
    "light": "#e1bee7"
  },
  {
    "color": "#00acc1",
    "dark": "#00838f",
    "light": "#b2ebf2"
  },
  {
    "color": "#ff7043",
    "dark": "#e64a19",
    "light": "#ffccbc"
  },
  {
    "color": "#9e9d24",
    "dark": "#827717",
    "light": "#f0f4c3"
  },
  {
    "color": "#5c6bc0",
    "dark": "#3949ab",
    "light": "#c5cae9"
  },
  {
    "color": "#f06292",
    "dark": "#e91e63",
    "light": "#f8bbd0"
  },
  {
    "color": "#00796b",
    "dark": "#004d40",
    "light": "#b2dfdb"
  },
  {
    "color": "#c2185b",
    "dark": "#880e4f",
    "light": "#f48fb1"
  }
]

If you provide your own Array of Objects in the Options for your Chart, you can override them with whatever you'd like.

Reply all

Reply to author

Forward