Custom color in different tasks

[jukbot]

Just an idea that good to have some custom color input for different tasks like below. This will help user to view chart as multiple or group tasks more clearly.

let tasks = [ { id: 'Task 1', name: 'Redesign website', color: '#ff0033', start: '2018-7-1', end: '2018-7-30', progress: 20, }, { id: 'Task 2', name: 'website 2', color: '#ff0033', start: '2018-7-05', end: '2018-7-15', progress: 80, dependencies: 'Task 1' }, { id: 'Task 3', name: 'website 3', color: '#ffff33', start: '2018-7-10', end: '2018-7-20', progress: 50, dependencies: 'Task 2' }, { id: 'Task 4', name: 'website 4', color: '#ff0066', start: '2018-7-10', end: '2018-7-20', progress: 50, dependencies: 'Task 2' }, { id: 'Task 5', name: 'website 5', color: '#ff00ff', start: '2018-7-10', end: '2018-7-20', progress: 50, dependencies: 'Task 2' },

[luofei2011]

you can add custom_class field into tasks.

let tasks = {
  id: 1,
  custom_class: 'cc-red',
  ...
}

// your css file
.cc-red {
  color: red;
}

[ElyGallego]

I know this issue is closed, but I wanted to share my solution since adding color to the class itself doesn't really work:

let tasks = { id: 1, custom_class: 'cc-red' ... }

// your css file .cc-red g rect { fill: red !important; }

[jainpradeep]

Colors not working from custom CSS please reopen.

[luofei2011]

let tasks = [{id: 1, custom_class: 'c-red', ...}]

// css
.c-red .bar {
  fill: #f00 !important;
}

[mariobrubio]

Did you solve the issue? @jainpradeep

[joergviola]

.cc-red g rect

This works for me! Thanks!

[jainpradeep]

@mariobrubio : Custom CSS hafve to be added in $bar class property in frappe-gantt.js `draw_bar() {

this.$bar = createSVG('rect', {

    x: this.x,

    y: this.y,

    width: this.width,

    height: this.height,

    rx: this.corner_radius,

    ry: this.corner_radius,

    class: 'bar' + this.task.custom_class, //added ' + this.task.custom_class'

    append_to: this.bar_group

});
animateSVG(this.$bar, 'width', 0, this.width);
if (this.invalid) {
    this.$bar.classList.add('bar-invalid');
}

}`