Applying a custom colors on HighCharts Line?

Question

I found a workaround to draw a gantt chart with highcharts line. It was nice to know that we can make a gantt chart with the fabulous library Highcharts but I want to apply a custom colors. Maybe I tried all possibilities that I found in the API. You can see what I did in my jsfiddle

// Define applications
var applications = [{
    name: 'App1',
    intervals: [{ // From-To pairs
        from: Date.UTC(2015, 0, 5),
        to: Date.UTC(2015, 0, 6),
        // We can't specify a single color for each data even we give an  array of objects with named, intervals values and color.
        color: '#FF4719'
    }, {
        from: Date.UTC(2015, 0, 12),
        to: Date.UTC(2015, 0, 16)
        ,color: '#2EB82E'
    }]
    // We can specify a single color of a line
    //,color: '#2EB82E'
}, {
    name: 'App2',
    intervals: [{ // From-To pairs
        from: Date.UTC(2015, 0, 7),
        to: Date.UTC(2015, 0, 9)
        // We can't specify a single color for each data even we give an  array of objects with named, intervals values and color.
        ,color: '#FFFF19'
    }, {
        from: Date.UTC(2015, 0, 26),
        to: Date.UTC(2015, 1, 6)
        ,color: '#3366FF'
    }]
    // We can specify a single color of a line
    //,color: '#3366FF'
}, {
    name: 'App3',
    intervals: [{ // From-To pairs
        from: Date.UTC(2015, 1, 20),
        to: Date.UTC(2015, 1, 21),
        label: 'Incident1'
        // We can't specify a single color for each data even we give an  array of objects with named, intervals values and color.
        ,color: '#E62EB8'
    }, {
        from: Date.UTC(2015, 2,11),
        to: Date.UTC(2015, 2, 13)
        ,color: '#8A5C2E'
    }, {
        from: Date.UTC(2015, 2, 19),
        to: Date.UTC(2015, 2, 20),
        label: 'Incident2'
        ,color: '#006699'
    }, {
        from: Date.UTC(2015, 2, 23),
        to: Date.UTC(2015, 2, 27)
        ,color: '#666699'
    }]
    // We can specify a single color of a line
    //,color: '#666699'
}, {
    name: 'App4',
    intervals: [{ // From-To pairs
        from: Date.UTC(2015, 2, 2),
        to: Date.UTC(2015, 2, 31)
        // We can't specify a single color for each data even we give an  array of objects with named, intervals values and color.
        ,color: '#339966'
    }]
    //,color: '#339966'
}];
// re-structure the applications into line seriesvar series = [];
var series = [];
$.each(applications.reverse(), function(i, application) {
    var item = {
        name: application.name,
        data: [],
        pointStart: Date.UTC(2015, 0, 1),
        pointInterval: 3 * 24 * 3600 * 1000
    };
    $.each(application.intervals, function(j, interval) {
        item.data.push({
            x: interval.from,
            y: i,
            label: interval.label,
            from: interval.from,
            to: interval.to,
            color: interval.color
        }, {
            x: interval.to,
            y: i,
            from: interval.from,
            to: interval.to,
            color: interval.color
        });
        
        // add a null value between intervals
        if (application.intervals[j + 1]) {
            item.data.push(
                [(interval.to + application.intervals[j + 1].from) / 2, null]
            );
        }

    });

    series.push(item);
});

// create the chart
var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },
    
    title: {
        text: 'Deployment Planning'
    },

    xAxis: {
        //startOfWeek: 1,
        type: 'datetime',
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%e %b', this.value);
            }
        }
    },

    yAxis: {
        tickInterval: 1,
        labels: {
            formatter: function() {
                if (applications[this.value]) {
                    return applications[this.value].name;
                }
            }
        },
        startOnTick: false,
        endOnTick: false,
        title: {
            text: 'Applications'
        },
            minPadding: 0.2,
                maxPadding: 0.2
    },

    legend: {
        enabled: false
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ applications[this.y].name + '</b><br/>' +
                Highcharts.dateFormat('%Y-%m-%d', this.point.options.from)  +
                ' - ' + Highcharts.dateFormat('%Y-%m-%d', this.point.options.to); 
        }
    },   
    // We can define the color chart to our lines
    //colors: ['#B572A7'],
    plotOptions: {
        series: {
            // We can specify a single color of a line
            //lineColor: '#303030'
            //lineColor: function() {
            //        return this.point.options.color;
            //        return '#303030';
			//},
        },
        line: {
            lineWidth: 9,
            // We can specify a single color of a line
            //color: '#B572A7',
            // We can't make function (){ ... } to get color for each     point.option or juste return a single color !
            //color: function() {
            //        return this.point.options.color;
            //        return '#B572A7';
			//},
            marker: {
                enabled: false
            },
            dataLabels: {
                enabled: true,
                align: 'left',
                formatter: function() {
                    return this.point.options && this.point.options.label;
                }
            }
        }
    },
    series: series

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 180px"></div>

I want to specify a single color for each data with givin an array of objects with named, intervals values and color. Like the pic

Like the pic

Any idea to do that ?

Thx

Answer 1

If you are still looking you can check out what I did with this here: [ Highcharts GANTT Chart Tooltip Mouse-over Tracking Issue ].

Answer 2

I found an other way to draw a gantt chart with highstock ! I used columnrange chart And now I get what I want :D jsfiddle

Highcharts.setOptions({
	lang: {
		months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
		shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
		decimalPoint: ',',
		printChart: 'Imprimer',
		downloadPNG: 'Télécharger en image PNG',
		downloadJPEG: 'Télécharger en image JPEG',
		downloadPDF: 'Télécharger en document PDF',
		downloadSVG: 'Télécharger en document Vectoriel',
		loading: 'Chargement en cours...',
		contextButtonTitle: 'Exporter le graphique',
		resetZoom: 'Réinitialiser le zoom',
		resetZoomTitle: 'Réinitialiser le zoom au niveau 1:1',
		thousandsSep: ' ',
		decimalPoint: ',',
		noData: 'Pas d\'information à afficher'
	}
});
// Define applications
var applications = [{
	name: 'App1',
	intervals: [{ // From-To pairs
		from: Date.UTC(2015, 0, 5),
		to: Date.UTC(2015, 0, 6)
		,step: '1'
		,color: '#FF0000'
	}, {
		from: Date.UTC(2015, 0, 12),
		to: Date.UTC(2015, 0, 16)
		,color: '#0066FF'
		,step: '2'
	}, {
		from: Date.UTC(2015, 1, 12),
		to: Date.UTC(2015, 1, 16)
		,color: '#00CC66'
		,step: '3'
	}]
}, {
	name: 'App2',
	intervals: [{ // From-To pairs
		from: Date.UTC(2015, 0, 7),
		to: Date.UTC(2015, 0, 9)
		,step: '1'
		,color: '#FF0000'
	}, {
		from: Date.UTC(2015, 0, 26),
		to: Date.UTC(2015, 1, 6)
		,step: '2'
		,color: '#0066FF'
	}]
}, {
	name: 'App3',
	intervals: [{ // From-To pairs
		from: Date.UTC(2015, 1, 20),
		to: Date.UTC(2015, 1, 21),
		label: 'Incident1'
		,step: '1'
		,color: '#FF0000'
	}, {
		from: Date.UTC(2015, 2,11),
		to: Date.UTC(2015, 2, 13)
		,step: '2'
		,color: '#0066FF'
	}, {
		from: Date.UTC(2015, 2, 19),
		to: Date.UTC(2015, 2, 20),
		label: 'Incident2'
		,step: '3'
		,color: '#00CC66'
	}, {
		from: Date.UTC(2015, 2, 23),
		to: Date.UTC(2015, 2, 27)
		,step: '4'
		,color: '#A3CC29'
	}]
}, {
	name: 'App4',
	intervals: [{ // From-To pairs
		from: Date.UTC(2015, 2, 2),
		to: Date.UTC(2015, 2, 31)
		,step: '1'
		,color: '#FF0000'
	}]
}];
// re-structure the applications into line seriesvar series = [];
var series = [];
$.each(applications.reverse(), function(i, application) {
	var item = {
		name: application.name,
		data: []
	};
	$.each(application.intervals, function(j, interval) {
		item.data.push({
			x: i,
			label: interval.label,
			low: interval.from,
			high: interval.to,
			step: interval.step,
			color: interval.color
		}, {
			x: i,
			low: interval.from,
			high: interval.to,
			step: interval.step,
			color: interval.color
		});
		
		// add a null value between intervals
		if (application.intervals[j + 1]) {
			item.data.push(
				[(interval.to + application.intervals[j + 1].from) / 2, null]
			);
		}

	});

	series.push(item);
}); 
$('#container').highcharts({
	chart: {
		type: 'columnrange',
		inverted: true,
		width: 800
	},
	title: {
		text: 'Deployment Planning'
	},
	xAxis: {
		categories: ['App4', 'App3', 'App2', 'App1'],
		title: {
			text: 'Applications'
		},
		minPadding: 0.2,
		maxPadding: 0.2
	},
	yAxis: {
		title: {
			text: ''
		},
		type: 'datetime',
		dateTimeLabelFormats: {
			week: '%e %b'
		},
		tickPixelInterval: 70,
		labels: {
			rotation: -45
		}
	},
	plotOptions: {
		columnrange: {
			grouping: true,
			dataLabels: {
				enabled: false,
				align: 'center',
				formatter: function() {
					return this.point.options.label;
				}
			}
		}
	},
	legend: {
		enabled: false
	},
	tooltip: {
		positioner: function () {
			return { x: 100, y: 35 };
		},
		formatter: function () {
			return this.point.options.step +" - "+ this.series.name + ' (' + Highcharts.dateFormat('%e %B', this.point.low) +
				' - ' + Highcharts.dateFormat('%B %e', this.point.high) + ')';
		}
	},
	series: series
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width: 100%; height: 400px;"></div>

Answer 3

Unfortunatley you cannot set different colors for single serie (points on the line).