Highcharts - Detail chart with stacked columns

Question

I'm trying to create a detail chart using Highcharts with stacked columns.
The problem is when you select the range wanted on the master chart, it only effects 1 section of the stacked columns.

I'm quite new to programming in general, looked everywhere I can think of for a solution, so any help would be massively appreciated.

JSFiddle demo of the problem here: http://jsfiddle.net/jp3qpfyw/

The highcharts portion of the code (data/series arrays replaced with generic numbers):

$(function () {
    var data = [0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
                0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
                0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269];

    var masterChart,
        detailChart;

    $(document).ready(function() {


        // create the master chart
        function createMaster() {
            masterChart = new Highcharts.Chart({
                chart: {
                    renderTo: 'master-container',
                    reflow: false,
                    borderWidth: 0,
                    backgroundColor: null,
                    marginLeft: 50,
                    marginRight: 20,
                    zoomType: 'x',
                    events: {

                        // listen to the selection event on the master chart to update the
                        // extremes of the detail chart
                        selection: function(event) {
                            var extremesObject = event.xAxis[0],
                                min = extremesObject.min,
                                max = extremesObject.max,
                                detailData = [],
                                xAxis = this.xAxis[0];

                            // reverse engineer the last part of the data
                            jQuery.each(this.series[0].data, function(i, point) {
                                if (point.x > min && point.x < max) {
                                    detailData.push({
                                        x: point.x,
                                        y: point.y
                                    });
                                }
                            });

                            // move the plot bands to reflect the new detail span
                            xAxis.removePlotBand('mask-before');
                            xAxis.addPlotBand({
                                id: 'mask-before',
                                from: -0.5,
                                to: min,
                                color: 'rgba(0, 0, 0, 0.2)'
                            });

                            xAxis.removePlotBand('mask-after');
                            xAxis.addPlotBand({
                                id: 'mask-after',
                                from: max,
                                to: 30.5,
                                color: 'rgba(0, 0, 0, 0.2)'
                            });


                            detailChart.series[0].setData(detailData);

                            return false;
                        }
                    }
                },
                title: {
                    text: null
                },
                xAxis: {
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
                },
                yAxis: {
                    gridLineWidth: 0,
                    labels: {
                        enabled: false
                    },
                    title: {
                        enabled: false
                    },
                },
                tooltip: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },

                series: [{
                    type: 'column',
                    data: data
                }],

            }, function(masterChart) {
                createDetail(masterChart)
            });
        }

        // create the detail chart
        function createDetail(masterChart) {

            var detailData = [];

            jQuery.each(masterChart.series[0].data, function(i, point) {
                detailData.push(point.y);
            });



            detailChart = new Highcharts.Chart({
                chart: {
                    type: 'column',
                    marginBottom: 120,
                    renderTo: 'detail-container',
                    reflow: false,
                    marginLeft: 50,
                    marginRight: 20,
                    style: {
                    position: 'absolute'
                    }
                },
                credits: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    enabled: false
                },
                title: {
                    text: 'title'
                },
                xAxis: {
                    categories:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: 'Purchase',
                    data: [0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
                           0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
                           0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269]
                }, {
                    name: 'Records',
                    data: [0.7901, 0.7898, 0.7879, 0.7886, 0.7858, 0.7814, 0.7825, 0.7826, 0.7826, 0.786,
                           0.7878, 0.7868, 0.7883, 0.7893, 0.7892, 0.7876, 0.785, 0.787, 0.7873, 0.7901,
                           0.7936, 0.7939, 0.7938, 0.7956, 0.7975, 0.7978, 0.7972, 0.7995, 0.7995, 0.7994]
                }]
            });
        }

        // make the container smaller and add a second container for the master chart
        var $container = $('#container')
            .css('position', 'relative');

        var $detailContainer = $('<div id="detail-container">')
            .appendTo($container);

        var $masterContainer = $('<div id="master-container">')
            .css({ position: 'absolute', top: 300, height: 100, width: '100%' })
            .appendTo($container);

        // create master and in its callback, create the detail chart
        createMaster();
    });

});

Answer 1

Your selection event handler only updates the series bound to the master chart. I'd re-write it to adjust the min/max on the chart instead so the whole thing updates:

selection: function(event) {
    var extremesObject = event.xAxis[0],
        min = extremesObject.min,
        max = extremesObject.max,
        xAxis = this.xAxis[0];

    var detailXAxis = detailChart.xAxis[0];
    detailXAxis.update({ min: min, max: max }); // instead of filtering and setting data, just set min/max

    // move the plot bands to reflect the new detail span
    xAxis.removePlotBand('mask-before');
    xAxis.addPlotBand({
        id: 'mask-before',
        from: -0.5,
        to: min,
        color: 'rgba(0, 0, 0, 0.2)'
    });

    xAxis.removePlotBand('mask-after');
    xAxis.addPlotBand({
        id: 'mask-after',
        from: max,
        to: 30.5,
        color: 'rgba(0, 0, 0, 0.2)'
    });

    return false;
}

Updated fiddle .