Customize the colors of the bar in Google Gantt charts

Question

It should be easy. How can I assign my own colors to bars in Google Gantt Charts ? The gant ignores my colors and automatically assigns blue, red and yellow colors (in that order) to the bars, and I cannot understand the problem. Can someone please indicate that I am missing something here or is not supported at all at this time?

Here is what I have:

function drawChart() { var data = new google.visualization.DataTable(); data.addColumn({ type: 'string', id: 'task_id' }, 'Task ID'); data.addColumn({ type: 'string', id: 'task_name' }, 'Task Name'); data.addColumn({ type: 'string', id: 'resource' }, 'Resource'); data.addColumn({ type: 'date', id: 'start_date' }, 'Start Date'); data.addColumn({ type: 'date', id: 'end_date' }, 'End Date'); data.addColumn({ type: 'number', id: 'duration' }, 'Duration'); data.addColumn({ type: 'number', id: 'percent_complete' }, 'Percent Complete'); data.addColumn({ type: 'string', id: 'dependencies' }, 'Dependencies'); data.addRows([ ['Research', 'Find sources', null, new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null], ['Write', 'Write paper', 'write', null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'], ['Cite', 'Create bibliography', 'write', null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'], ['Complete', 'Hand in paper', 'complete', null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'], ['Outline', 'Outline paper', 'write', null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research'] ]); var colors = []; var colorMap = { write: '#e63b6f', complete: '#19c362' } for (var i = 0; i < data.getNumberOfRows(); i++) { colors.push(colorMap[data.getValue(i, 2)]); } var options = { height: 275, gantt: { criticalPathEnabled: true, criticalPathStyle: { stroke: '#e64a19', strokeWidth: 5 } }, colors: colors }; var chart = new google.visualization.Gantt(document.getElementById('chart_div')); chart.draw(data, options); } 

Answer 1

I figured out the hacker way. Basically, you should listen to every event triggered by a chart and override them with a function that colors the chart.

Answer 2

It's quite old, but just in case someone needs to do it ... Not a very elegant solution, but it works.

 function changeColors() { $("text[fill='#5e97f6']").attr('fill',"#0099D8"); // Left Text $("rect[fill='#5e97f6']").attr('fill',"#0099D8"); // Full bar $("path[fill='#2a56c6']").attr('fill', '#006B99'); // Percentage completed $("rect[fill='#2a56c6']").attr('fill', '#0099D8'); // Hover Full Bar $("path[fill='#204195']").attr('fill', '#006B99'); // Hover Percentage // Change Old red to new Red $("text[fill='#db4437']").attr('fill',"#D41647"); $("rect[fill='#db4437']").attr('fill',"#D41647"); $("path[fill='#a52714']").attr('fill', '#A21135'); $("rect[fill='#a52714']").attr('fill', '#D41647'); $("path[fill='#7c1d0f']").attr('fill', '#A21135'); // Change Old Yellow to new Yellow $("text[fill='#f2a600']").attr('fill',"#FCB813"); $("rect[fill='#f2a600']").attr('fill',"#FCB813"); $("path[fill='#ee8100']").attr('fill', '#C98e03'); $("rect[fill='#ee8100']").attr('fill', '#FCB813'); $("path[fill='#b36100']").attr('fill', '#C98e03'); } 

... and then, after drawing the diagram, add ready-made and other event listeners to run changeColors at any time.

 chart.draw(data, options); google.visualization.events.addListener(chart, 'ready', changeColors); google.visualization.events.addListener(chart, 'onmouseover', changeColors); google.visualization.events.addListener(chart, 'onmouseout', changeColors); google.visualization.events.addListener(chart, 'select', changeColors); google.visualization.events.addListener(chart, 'error', changeColors); google.visualization.events.addListener(chart, 'click', changeColors); google.visualization.events.addListener(chart, 'animationfinish', changeColors); 

Questions:

There seems to be some color change in certain situations when you click on it.