Show Column and line chart together in drill down using highcharts

Question

I am trying to show column chart and line chart in combination in drill down using highcharts , but not getting success, but when applying this without drill down, it is easily showing both charts.

I am using this code:

            $(function () {
                    var defaultTitle = "Total Distance By Site";
                    var drilldownTitle = "Ave. Journey Distance By Vehicle Type";
                    var ydrillupTitle = "km";
                    var ydrilldownTitle = "";
                    var xdrillupcat = ['Site A', 'Site B', 'Site C', 'Site D'];
                    var xdrilldowncat = ['Waste', 'Medium Truck', 'Mid-Sized', 'Car'];

                    var chart = new Highcharts.Chart({
                        chart: {
                            type: 'column',
                            renderTo: 'totdisbyloc',
                            events: {
                                drilldown: function(e) {
                                    chart.setTitle({ text: drilldownTitle });
                                    chart.xAxis[0].setCategories(xdrilldowncat);
                                    chart.yAxis[0].axisTitle.attr({
                                        text: ydrilldownTitle
                                    });
                                },
                                drillup: function(e) {
                                    chart.setTitle({ text: defaultTitle });
                                    chart.xAxis[0].setCategories(xdrillupcat);
                                    chart.yAxis[0].axisTitle.attr({
                                        text: ydrillupTitle
                                    });
                                }
                            }
                        },
                        title: {
                            text: defaultTitle
                        },
                        subtitle: {
                            text: ''
                        },

                        xAxis: {
                            categories: xdrillupcat
                        },

                        yAxis: {
                            allowDecimals: false,
                            min: 0,
                            title: {
                                text: ydrillupTitle
                            }
                        },

                        plotOptions: {
                            column: {
                                stacking: 'normal',
                                showInLegend: true
                            }
                        },

                        series:[
                            {
                                name:'Car', 
                                tooltip: {
                                    headerFormat: '<span style="font-size:11px">{}</span>',
                                    pointFormat: '<span>Car</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
                                },
                                data: [{
                                    name: "Car",
                                    title: "Ave. Journey Distance By Car",
                                    y: 5,
                                    drilldown: "Car"
                                }, {
                                    name: "Mid-Sized",
                                    title: "Ave. Journey Distance By Mid-Sized",
                                    y: 4,
                                    drilldown: "Mid-Sized"
                                }, {
                                    name: "Medium Truck",
                                    title: "Ave. Journey Distance By Medium Truck",
                                    y: 3,
                                    drilldown: "Medium Truck"
                                }, {
                                    name: "Large Truck",
                                    title: "Ave. Journey Distance By Large Truck",
                                    y: 6,
                                    drilldown: "Large Truck"
                                }] 
                            },
                            {
                                name:'Mid-Sized', 
                                tooltip: {
                                    headerFormat: '<span style="font-size:11px">{}</span>',
                                    pointFormat: '<span>Mid-Sized</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
                                },
                                data: [{
                                    name: "Car",
                                    title: "Ave. Journey Distance By Car",
                                    y: 2,
                                    drilldown: "Car"
                                }, {
                                    name: "Mid-Sized",
                                    title: "Ave. Journey Distance By Mid-Sized",
                                    y: 2,
                                    drilldown: "Mid-Sized"
                                }, {
                                    name: "Medium Truck",
                                    title: "Ave. Journey Distance By Medium Truck",
                                    y: 3,
                                    drilldown: "Medium Truck"
                                }, {
                                    name: "Large Truck",
                                    title: "Ave. Journey Distance By Large Truck",
                                    y: 2,
                                    drilldown: "Large Truck"
                                }] 
                            },
                            {
                                name:'Medium Truck', 
                                tooltip: {
                                    headerFormat: '<span style="font-size:11px">{}</span>',
                                    pointFormat: '<span>Medium Truck</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
                                },
                                data: [{
                                    name: "Car",
                                    y: 4,
                                    drilldown: "Car"
                                }, {
                                    name: "Mid-Sized",
                                    y: 5,
                                    drilldown: "Mid-Sized"
                                }, {
                                    name: "Medium Truck",
                                    y: 3,
                                    drilldown: "Medium Truck"
                                }, {
                                    name: "Large Truck",
                                    y: 7,
                                    drilldown: "Large Truck"
                                }]
                            },
                            {
                                name:'Large Truck', 
                                tooltip: {
                                    headerFormat: '<span style="font-size:11px">{}</span>',
                                    pointFormat: '<span>Large Truck</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
                                },
                                data: [{
                                    name: "Car",
                                    y: 5,
                                    drilldown: "Car"
                                }, {
                                    name: "Mid-Sized",
                                    y: 3,
                                    drilldown: "Mid-Sized"
                                }, {
                                    name: "Medium Truck",
                                    y: 4,
                                    drilldown: "Medium Truck"
                                }, {
                                    name: "Large Truck",
                                    y: 7,
                                    drilldown: "Large Truck"
                                }]
                            }
                        ],
                        drilldown: {
                            series: [
                                {
                                    title: "Ave. Journey Distance by Car",
                                    showInLegend: false,
                                    name: "Car",
                                    type: "column",
                                    id: "Car",
                                    plotOptions: {
                                        series: {
                                            dataLabels: {
                                                enabled: true,
                                                format: '{point.name}: {point.y}'
                                            }
                                        }
                                    },
                                    tooltip: {
                                        headerFormat: '<span style="font-size:11px">{}</span>',
                                        pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
                                    },
                                    data: [
                                        ["Large Truck", 24],
                                        ["Medium Truck", 17],
                                        ["Mid-Sized", 8],
                                        ["Car", 10]
                                    ]
                                },
                                {
                                    title: "Ave. Journey Distance by Car",
                                    showInLegend: false,
                                    name: "Car",
                                    type: "spline",
                                    id: "Car",
                                    plotOptions: {
                                        series: {
                                            dataLabels: {
                                                enabled: true,
                                                format: '{point.name}: {point.y}'
                                            }
                                        }
                                    },
                                    tooltip: {
                                        headerFormat: '<span style="font-size:11px">{}</span>',
                                        pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
                                    },
                                    data: [
                                        ["Large Truck", 22],
                                        ["Medium Truck", 15],
                                        ["Mid-Sized", 6],
                                        ["Car", 8]
                                    ]
                                },
                                {
                                    title: "Ave. Journey Distance by Mid-Sized",
                                    name: "Mid-Sized",
                                    showInLegend: false,
                                    type: "column",
                                    id: "Mid-Sized",
                                    plotOptions: {
                                        series: {
                                            dataLabels: {
                                                enabled: true,
                                                format: '{point.name}: {point.y}'
                                            }
                                        }
                                    },
                                    tooltip: {
                                        headerFormat: '<span style="font-size:11px">{}</span>',
                                        pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
                                    },
                                    data: [
                                        ["Large Truck", 24],
                                        ["Medium Truck", 17],
                                        ["Mid-Sized", 8],
                                        ["Car", 10]
                                    ]
                                }, 
                                {
                                    title: "Ave. Journey Distance by Medium Truck",
                                    name: "Medium Truck",
                                    showInLegend: false,
                                    type: "column",
                                    id: "Medium Truck",
                                    plotOptions: {
                                        series: {
                                            dataLabels: {
                                                enabled: true,
                                                format: '{point.name}: {point.y}'
                                            }
                                        }
                                    },
                                    tooltip: {
                                        headerFormat: '<span style="font-size:11px">{}</span>',
                                        pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
                                    },
                                    data: [
                                        ["Large Truck", 24],
                                        ["Medium Truck", 17],
                                        ["Mid-Sized", 8],
                                        ["Car", 10]
                                    ]
                                }, 
                                {
                                    title: "Ave. Journey Distance by Large Truck",
                                    name: "Large Truck",
                                    showInLegend: false,
                                    type: "column",
                                    id: "Large Truck",
                                    plotOptions: {
                                        series: {
                                            dataLabels: {
                                                enabled: true,
                                                format: '{point.name}: {point.y}'
                                            }
                                        }
                                    },
                                    tooltip: {
                                        headerFormat: '<span style="font-size:11px">{}</span>',
                                        pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
                                    },
                                    data: [
                                        ["Large Truck", 24],
                                        ["Medium Truck", 17],
                                        ["Mid-Sized", 8],
                                        ["Car", 10],
                                    ]
                                }
                            ]
                        }
                        // ... more options
                    });
            });

Answer 1

Using dynamic drill down it is possible to use addSingleSeriesAsDrilldown function for each series and call chart.applyDrilldown(); at the end of drill down.

Example: http://jsfiddle.net/zn1o2xzL/