Highcharts gantt chart : Task progress indicator need to show a single task for various status like completed,inprogress etc with different colors

Question

Refer the image

var markers = JSON.parse('<%=ConvertDataTabletoString("GetTaskWorkPercentage","2",null,1,10) %>');
var Arrayset = [];
var starts1 = [];
var ends1 = [];
var val1 = [];
var val2 = [];

if (markers != null) {
    if (markers.length > 0) {
        var prj = document.getElementById("param1").value;
        for (var i = 0; i < markers.length; i++) {

            var syearval = parseInt(markers[i].ActualStart.substr(0, 4));
            var smonthval = parseInt(markers[i].ActualStart.substr(5, 2)) - 1;
            var sdateval = parseInt(markers[i].ActualStart.substr(8, 2));

            var eyearval = parseInt(markers[i].ActualEnd.substr(0, 4));
            var emonthval = parseInt(markers[i].ActualEnd.substr(5, 2)) - 1;
            var edateval = parseInt(markers[i].ActualEnd.substr(8, 2));
            val1 = [Date.UTC(syearval, smonthval, sdateval)];
            val2 = [Date.UTC(eyearval, emonthval, edateval)];
            starts1.push(val1[0]);
            ends1.push(val2[0]);
            Arrayset.push({
                name: markers[i].Task,
                completed: markers[i].Percentages,
                start: starts1[i],
                end: ends1[i]
            });
        }

        MainLoadChart(Arrayset);
    }
}

function MainLoadChart(array) {
    var dta = array;
    Highcharts.ganttChart('container8', {

        title: {
            text: 'Task Progress Indicator Status'
        },

          tooltip: {
                        formatter()
                        {
                            //let output = `<span style="font-size: 10px">${this.point.series.name}</span><br>
                            let output = ` <span style="font-size: 20px;color:green">${prj}</span><br>
                                      <span><b>${this.key}(Overall Subtask Percentage):${this.point.completed}% </b></span><br>
                                     <span>Start: ${Highcharts.dateFormat('%A, %e. %b, %Y', this.x)}</span><br>
                     <span>End: ${Highcharts.dateFormat('%A, %e. %b, %Y', this.x2)}</span>`
                            return output
                        }
                    },

        series: [{
        data: dta,

         dataLabels: {
                            formatter() {
                                //return this.point.completed;
                                let output1 = ` <span style="font-size: 10px">${this.point.completed}%</span>`

                                return output1
                            }

        }]

    });
}

Currently I´m showing the output of overall subtask. I need to show in a single task progress (overall) for various status like completed, inprogress, hold, returned with different (multiple) colors and style. So that values should not overlap or hide like datalabel values.

Answer 1

You should be able to achieve it by using yAxis.categories and assigning data to this one category.

Demo: https://jsfiddle.net/BlackLabel/19L48qy5/

...
yAxis: {
    categories: ['Prototyping'],
},
series: [{
    name: 'Project 1',
    data: [{
        name: 'test1',
        start: Date.UTC(2014, 10, 18),
        end: Date.UTC(2014, 10, 25),
        y: 0
    }, {
            color: 'red',
        name: 'test2',
        start: Date.UTC(2014, 10, 18),
        end: Date.UTC(2014, 10, 22),
        y: 0
    }, {
            color: 'green',
        name: 'test3',
        start: Date.UTC(2014, 10, 18),
        end: Date.UTC(2014, 10, 20),
        y: 0
    }]
}]
...

API: https://api.highcharts.com/gantt/yAxis.categories