[Solved]-How can I make milestone lines with a GANTT chart using the highcharts library?-Highcharts

if you add a second axis and series (with the data of the milestones) you should be able to do it.

here is an example with a line on top of a column chart

$(function () {
    $('#container').highcharts({
        chart: {
            zoomtype: 'xy'
        },
        title: {
            text: 'average monthly temperature and rainfall in tokyo'
        },
        subtitle: {
            text: 'source: worldclimate.com'
        },
        xaxis: [{
            categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun',
                'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
            crosshair: true
        }],
        yaxis: [{ // primary yaxis
            labels: {
                format: '{value}°c',
                style: {
                    color: highcharts.getoptions().colors[1]
                }
            },
            title: {
                text: 'temperature',
                style: {
                    color: highcharts.getoptions().colors[1]
                }
            }
        }, { // secondary yaxis
            title: {
                text: 'rainfall',
                style: {
                    color: highcharts.getoptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: highcharts.getoptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalalign: 'top',
            y: 100,
            floating: true,
            backgroundcolor: (highcharts.theme && highcharts.theme.legendbackgroundcolor) || '#ffffff'
        },
        series: [{
            name: 'rainfall',
            type: 'column',
            yaxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valuesuffix: ' mm'
            }

        }, {
            name: 'temperature',
            type: 'spline',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            tooltip: {
                valuesuffix: '°c'
            }
        }]
    });
});

you can use plotlines on xaxis.

thanks joshwa for a great answer.

if there are 2 projects, each of the 3 sections ('prototyping', 'development', 'testing') would have 2 bar one on top of the other for comparison.

$(function () {

/**
 * highcharts x-range series plugin
 */ (function (h) {
    var defaultplotoptions = h.getoptions().plotoptions,
        columntype = h.seriestypes.column,
        each = h.each;

    defaultplotoptions.xrange = h.merge(defaultplotoptions.column, {});
    h.seriestypes.xrange = h.extendclass(columntype, {
        type: 'xrange',
        parallelarrays: ['x', 'x2', 'y'],
        animate: h.seriestypes.line.prototype.animate,

        /**
         * borrow the column series metrics, but with swapped axes. this gives free access
         * to features like grouppadding, grouping, pointwidth etc.
         */
        getcolumnmetrics: function () {
            var metrics,
            chart = this.chart,
                swapaxes = function () {
                    each(chart.series, function (s) {
                        var xaxis = s.xaxis;
                        s.xaxis = s.yaxis;
                        s.yaxis = xaxis;
                    });
                };

            swapaxes();

            this.yaxis.closestpointrange = 1;
            metrics = columntype.prototype.getcolumnmetrics.call(this);

            swapaxes();

            return metrics;
        },
        translate: function () {
            columntype.prototype.translate.apply(this, arguments);
            var series = this,
                xaxis = series.xaxis,
                yaxis = series.yaxis,
                metrics = series.columnmetrics;

            h.each(series.points, function (point) {
                barwidth = xaxis.translate(h.pick(point.x2, point.x + (point.len || 0))) - point.plotx;
                point.shapeargs = {
                    x: point.plotx,
                    y: point.ploty + metrics.offset,
                    width: barwidth,
                    height: metrics.width
                };
                point.tooltippos[0] += barwidth / 2;
                point.tooltippos[1] -= metrics.width / 2;
            });
        }
    });

    /**
     * max x2 should be considered in xaxis extremes
     */
    h.wrap(h.axis.prototype, 'getseriesextremes', function (proceed) {
        var axis = this,
            datamax = number.min_value;

        proceed.call(this);
        if (this.isxaxis) {
            each(this.series, function (series) {
                each(series.x2data || [], function (val) {
                    if (val > datamax) {
                        datamax = val;
                    }
                });
            });
            if (datamax > number.min_value) {
                axis.datamax = datamax;
            }
        }
    });
}(highcharts));


// the chart
$('#container').highcharts({
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'highcharts x-range study'
    },
    xaxis: {
        type: 'datetime',
        pointinterval: 24 * 3600 * 1000, // one day,   
    },
    yaxis: {
        title: '',
        categories: ['prototyping', 'development', 'testing'],
        min: 0,
        max: 2
    },
    series: [{
        name: 'project 1',
        borderradius: 5,
        pointwidth: 10,
        data: [{
            x: date.utc(2014, 11, 1),
            x2: date.utc(2014, 11, 2),
            y: 0
        },{
            x: date.utc(2014, 11, 3),
            x2: date.utc(2014, 11, 9),
            y: 0
        }, {
            x: date.utc(2014, 11, 2),
            x2: date.utc(2014, 11, 5),
            y: 1
        }, {
            x: date.utc(2014, 11, 1),
            x2: date.utc(2014, 11, 9),
            y: 2
        }, {
            x: date.utc(2014, 11, 9),
            x2: date.utc(2014, 11, 19),
            y: 1
        }, {
            x: date.utc(2014, 11, 10),
            x2: date.utc(2014, 11, 23),
            y: 2
        }]
    },{
        name: 'project 2',
        borderradius: 5,
        pointwidth: 10,
        data: [{
            x: date.utc(2014, 11, 1),
            x2: date.utc(2014, 11, 2),
            y: 0
        }, {
            x: date.utc(2014, 11, 2),
            x2: date.utc(2014, 11, 5),
            y: 1
        }, {
            x: date.utc(2014, 11, 8),
            x2: date.utc(2014, 11, 9),
            y: 2
        }, {
            x: date.utc(2014, 11, 9),
            x2: date.utc(2014, 11, 19),
            y: 1
        }, {
            x: date.utc(2014, 11, 13),
            x2: date.utc(2014, 11, 18),
            y: 2
        }]
    }]

});
});