ElementStacks

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px"></div>

<div id="report"></div>

JavaScript

var $report = $('#report');

// create the chart
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column',
        events: {
            selection: function(event) {
        
                
        var axis = event.xAxis[0].axis;
        var minPxzz = event.xAxis[0].min;
        var maxPxzz = event.xAxis[0].max;

        var yaxis = event.yAxis[0].axis;
        var minPyzz = event.yAxis[0].min;
        var maxPyzz = event.yAxis[0].max;
                
        axis.addPlotLine({
          value: minPxzz,
          color: 'black',
          width: 1
        });

        axis.addPlotLine({
            value: maxPxzz,
            color: 'purple',
            width: 1
          });

        yaxis.addPlotLine({
          value: minPyzz,
          color: 'black',
          width: 1
        });

        yaxis.addPlotLine({
            value: maxPyzz,
            color: 'purple',
            width: 1
          });
                
                
                
                
                for (var i = 0; i < this.series[0].data.length; i++) {
                    var point = this.series[0].data[i];
                    if (point.x > event.xAxis[0].min &&
                        point.x < event.xAxis[0].max &&
                        point.y > event.yAxis[0].min &&
                        point.y < event.yAxis[0].max) {
                            point.select(true, true);
                        }
                    
                }
                return false;
            }
        },
        zoomType: 'xy'
    },
    xAxis: {
    },
    
    series: [{
        data: [1, 2, 3, 3, 2, 3, 6, 4, 2]        
    }]
});