Highchart with dual y-axis with date

Question

I'm trying to display details of projects. I want show completion percentage on a bar chart with the start date for each of those project as line chart.

Now, for achieving this I have created a chart with dual y-axis.
1 - axis-1 shows progress with bar-chart
2 - axis-2 supposed to show start dates with a line chart

Bar chart works fine. Even the line chart works fine without the dual axis. But, when I add them together the line-chart disappears. I tried changing the dates on the line chart for random numbers - that works as well.
Anyone knows how to make dates work on a dual-axis chart.
jsfiddle

var projectDetails = 
    [{
        "name": "+PS8039",
        "startDate": "2016-02-01",
        "finishDate": "2016-04-01"
    }, {
        "name": "+PS8039",
        "startDate": "2016-01-02",
        "finishDate": "2016-08-02"
    }, {
        "name": "+PS8039",
        "startDate": "2016-03-08",
        "finishDate": "2016-08-08"
    }, {
        "name": "+PS8039",
        "startDate": "2016-04-11",
        "finishDate": "2016-09-11"
    }, {
        "name": "+PS8039",
        "startDate": "2016-05-13",
        "finishDate": "2016-12-13"
    }, {
        "name": "+PS8039",
        "startDate": "2016-01-15",
        "finishDate": "2016-04-15"
    }, {
        "name": "+PS8039",
        "startDate": "2016-02-25",
        "finishDate": "2016-08-25"
    }, {
        "name": "+PS8039",
        "startDate": "2016-03-03",
        "finishDate": "2016-07-03"
    }, {
        "name": "+PC2E",
        "startDate": "2016-04-07",
        "finishDate": "2016-05-31"
    }, {
        "name": "+PC2E",
        "startDate": "2016-05-16",
        "finishDate": "2016-09-01"
    }];

$(function () {
    var xCategories = new Array();
    var completionpercent  = new Array();
    var startdates = new Array();
    var finishdates = new Array();

    for(var i = 0; i< projectDetails.length; i++){
        xCategories[i] = projectDetails[i].name;
        startdates[i] = moment(projectDetails[i].startDate).format('x');
        finishdates[i] = projectDetails[i].finishDate;

        completionpercent[i] =  ((Date.now() - Date.parse(projectDetails[i].startDate))
                                 /(Date.parse(projectDetails[i].finishDate) - Date.parse(projectDetails[i].startDate)))
                                *100 ;          

    }

    $('#Chart').highcharts({
        colors: ['#2C5898'],
        title: {
            text: 'Project Completion'
        },
        legend: {
            enabled: false
        },
        xAxis: [{
            categories: xCategories,
        crosshair: true
        }],
        yAxis:[{
            title: {
                text: '% Completion'            
            },
            max: 110
        },
               {
                   "title": {
                "text": "Start Dates"
            },
            opposite: true
               }
        ],
        plotOptions: {
            bar: {
                groupPadding: 0,
                zones: [{
                    value: 100
                },{
                    color: {
                            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                            stops: [
                                [0, '#cc0000'],
                                [1, '#ff8080']
                            ]
                        }
                }]
            }
        },
        credits: {
            enabled: false
        },
        series: [{
        name: 'Start Dates',
        type: 'line',
        data: startdates
        },{
            name: 'Completion %',
            type: 'bar',
            data: completionpercent
        }]
    });
});

Answer 1

You need to specify that the line series relates to the second axis:

yAxis: 1,

Updated fiddle:

• https://jsfiddle.net/jlbriggs/4e6edy7t/2/