Different colours of Bars in Gantt chart

[rashid-ve]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

`import React from 'react';
import Chart from 'react-google-charts';
import Loader from '../../components/Loader'

function TasksChart({ dashboardTasks, reducedHeight }) {
const tasksColor = []
dashboardTasks.map(element => [
tasksColor.push({
color: element?.color,
dark: element?.color,
light: element?.color
})
])
console.log('at chart', tasksColor)
const editedDashboardTasks = dashboardTasks.map((task) => [
task.task_id,
task.task_name,
task.last_doc,
new Date(
new Date(task.start_date).getFullYear(),
new Date(task.start_date).getMonth(),
new Date(task.start_date).getDate()
),
new Date(task.end_date) > new Date(new Date().setDate(new Date().getDate() + 30)) ?
new Date(
new Date(new Date().setDate(new Date().getDate() + 30)).getFullYear(),
new Date(new Date().setDate(new Date().getDate() + 30)).getMonth(),
new Date(new Date().setDate(new Date().getDate() + 30)).getDate()
) :
new Date(
new Date(task.end_date).getFullYear(),
new Date(task.end_date).getMonth(),
new Date(task.end_date).getDate()
), 0, 0, 0
]);

return (
<div id="chart_div" style={{height:'100%'}}>
<Chart
height={'100%'}
width={'100%'}
className="chart-class"
chartType='Gantt'
loader={}
data={[
[
{ type: 'string', label: 'Task ID' },
{ type: 'string', label: 'Task Name' },
{ type: 'string', label: 'Resource' },
{ type: 'date', label: 'Start Date' },
{ type: 'date', label: 'End Date' },
{ type: 'number', label: 'Duration' },
{ type: 'number', label: 'Status' },
{ type: 'string', label: 'Dependencies' }
],
...editedDashboardTasks,
]
}
options={{
width: '100%',
height: 'auto',
gantt: {
trackHeight: reducedHeight && 40 || 80,
// innerGridTrack: {fill: '#ffffff'},
// innerGridDarkTrack: {fill: '#f5f5f5'},
palette: tasksColor,
}
}}
rootProps={{ 'data-testid': '2' }}
chartEvents={[
{
eventName: "ready",
callback: ({ chartWrapper, google }) => {
console.log('chart', google)
}
}
]}
/>

);
}

export default TasksChart;
`

The palette attribute of gantt doesn't renders the colors from tasksColor array. Only renders the first colour in array.

Reproduction

To reproduce, please run the above code!

react-google-charts version

4.0.0

Possible solution

I want my solution like this!
(https://codesandbox.io/s/hungry-kepler-iwt76o)

[rashid-ve]

@rakannimer Can you please describe, How are you displaying these different colour on bars here? I didn't find any specific code for this!
https://codesandbox.io/s/hungry-kepler-iwt76o