Q: Applying a custom colors on HighCharts Line? 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

A: 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>



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

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