Gantt Chart - Customize Colors per Resource

[d4mation]

This feature exists for most other Chart Types (Series for Bar Charts, for example), but it currently doesn't seem to be possible for the Gantt Charts.

I'm implementing this into a project where a User would be able to define colors for Task Labels, and Resources seem to match up with that very well. Sadly there is no way to assign colors manually right now.

Being able to handle it like this would be preferable, as a simple Object could define colors per-Resource and then have the automatic color selection currently baked-in work as a fallback.

Another post on the Google Groups Forum requesting this feature

Edit: 2018/02/21

There's an undocumented option. gantt.palette. That's where the colors are being stored. You can safely override those the same as any other option.

The default colors are as follows:

[
  {
    "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"
  }
]

[jmk7773]

I would like to see the same feature as well, seems like this should be easy to implement.

[sergiobrr]

Please do it

[jkhedani]

@d4mation I know this is a bit old but what I was able to do is just override the CSS by targeting the preset colors they used:

path[fill*="#2a56c6"] { fill: Red } path[fill*="#204195"] { fill: DarkRed }

I'm currently making a css file that contains as many permutations as I can find (which is quite a lot) but for smaller charts this should work fine. Any thoughts on what the downfalls of this method would be?

[jalle007]

This looks like a big issue. Is there any other way to customize chart colors, besides selecting "winter" / "summer" or other stupid schemes ?

[d4mation]

@jkhedani if it is a static use case (in that you always want things colored a certain way, kind of like making your own "theme") using CSS should be fine. My use case which spurred this was allowing users to construct their own Gantt Charts using an interface which then built a Google Chart, so being able to pass it in as an option just made more sense.

@jalle007 not that I'm aware of, no.

[jalle007]

@d4mation but can we customize these schemas at least? I just need to set basic colors ,nothing special

[d4mation]

@jalle007 I'm not affiliated with Google, but unless things have changed since I opened this issue early last year there are no ways to change the colors manually in a Gantt Chart in Google Charts.

[jalle007]

Ok, thanks !

[jkhedani]

@d4mation Gotcha. This definitely needs to be addressed. A side note: I decided to use Timelines instead of Gantt and was able to hack the styles to make it look like a Gantt chart. It's pretty much the same thing and you get the added benefit of being to customize colors in options.

[d4mation]

While this is by no means an ideal solution, following something like https://stackoverflow.com/a/40655754 could work in the meantime. It has serious limitations though, such as it not working with Task Dependencies or if Task Progress isn't defined. The sample code also does not re-color the Row Labels or the Tooltip Text for the Resource.

Edit:

Having to poke around the (minified) source code for the Gantt Chart to ensure the code I'm writing to force-recolor everything using that example as a base works properly when Dependencies are set and I believe I found the variable that the colors are stored in.

It is globally scoped as gvjs_Lka in v45.2 and it is an Array of Objects with each Object holding different shades of each color.

I don't think overriding the value of that variable is necessarily a good idea either since it will likely change when they release a new update (as the source code is minified after all), but this could be an option if you lock the version down to v45.2 in the loader.

EDIT 2:

Guys, there's an undocumented option. gantt.palette. That's where the colors are being stored. You can safely override those the same as any other option.

The default colors are as follows:

[
  {
    "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"
  }
]

[samus42]

The problem with the palette is that it seems to go in order based on the earliest start date, then matches other rows with that resourceId. So if you had a resourceId of alpha that was showing up blue as it was the earliest start date, as soon as you got another item in there with an earlier start date of resourceId beta, then the colors would all change. So attempting to make the resourceId meaningful color-wise just isn't possible right now. Would really love this to be fixed.

[Togusa75]

I've found a workaround to the color problem.

Each item of the "palette" array does corresponds to each "row" in the chart data. If there are more rows than items in the palette, it simply restart using the colors from the first one in the palette. However, as samus42 already noted, it seems that the resource is also involved, meaning that each row with the same resourceID will have the same color as the first / earliest item with that resourceID, regardless of its position.

My solution is to dinamically generate a palette array, along with the data rows, with the same number, each one with its color, computed by the backend logic in my case, and then assign a unique "resourceID" to each row... I've used the itemID as the resourceID. By doing so the palette is perfectly honored.

Another thing to note is that the "color" attribute of each palette object, actually controls the color of the label of the row. The "dark" attribute controls the color used for the complete part of the task and the "light" attribute controls the color of the to-be-completed part.