Customize the bar colors in Google Gantt Charts

Question

This should be simple. How can I assign my own colors to the bars in Google Gantt Charts? The gantt is ignoring my colors and automatically assigning blue, red and yellow co

Answer 1

There is an optiongantt.palette which takes an array of objects.

var options = {
  gantt: {
    palette: [
      {
        "color": "#cccccc",
        "dark": "#333333",
        "light": "#eeeeee"
      }
    ]
  }
}

By providing your own array of objects, you can override the default palette.

This is the default palette that the chart uses:

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