How to Set Colors in Project Gantt Chart!

, ,
1

Hi there,

I have successfully created a Gantt chart for my Project using the JS code below:

frappe.views.calendar["Project"] = {
    field_map: {
        start: "exp_start_date",
        end: "exp_end_date",
        id: "name",
        title: "project_name",
        allDay: "allDay",
        progress: "progress",
    },
    gantt: true,
    filters: [
        {
            fieldtype: "Link",
            fieldname: "project",
            options: "Project",
            label: __("Project"),
        },
    ],
    get_events_method: "frappe.desk.calendar.get_events",
};

However, I’m unable to set task colors in the Gantt chart.

I added a field in the Project DocType with:

  • Fieldname: custom_color

  • Fieldtype: Color

…but the colors are still not being applied in the Gantt view.

Can someone help me understand how to correctly set or map the color field in the Gantt chart?

Thanks in advance!

2

we use this client script for doctype Task

__

// — TYPE → COLOR MAPPING -----------------------------------
const color_map = {
“Type A”: “#ECAD4B”,
“Type BBB”: “#ECAD4B”,
“Type CCCC”: “#FF69B4”,
“Type DDDDD”: “#EC864B”
};

frappe.ui.form.on(‘Task’, {
type(frm) {
const col = color_map[frm.doc.type];
if (col) frm.set_value(“color”, col);
}
});

___

hopefully that helps?

3

@Ben_Hly Thanks for the reply.

I tried this approach, but it didn’t work in my case. I later found the reason for the issue.

In frappe.desk.calendar.get_events, the Gantt chart looks for a field named color. Since my Project DocType had the field custom_color, the color was not applied.

After overriding the get_events method and mapping custom_color to color, the Gantt chart colors started working correctly.

Thanks again for your input, it helped me dig deeper into the issue.