Highchart selection without zoom
$(function () { var $report = $('#report'); // create the chart var chart = new Highcharts.Chart({ chart: { renderTo: 'container', events: { selection: function(event) { if (event.xAxis) { $report.html('min: '+ event.xAxis[0].min +', max: '+ event.xAxis[0].max); return false; } } }, zoomType: 'x' }, xAxis: { }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); });
http://jsfiddle.net/8LBFp/
$(function () { var rectangle; // create the chart var chart = new Highcharts.Chart({ chart: { renderTo: 'container', events: { selection: function(event) { var xMin = chart.xAxis[0].translate((event.xAxis[0]||chart.xAxis[0]).min), xMax = chart.xAxis[0].translate((event.xAxis[0]||chart.xAxis[0]).max), yMin = chart.yAxis[0].translate((event.yAxis[0]||chart.yAxis[0]).min), yMax = chart.yAxis[0].translate((event.yAxis[0]||chart.yAxis[0]).max); rectangle.attr({ x: xMin + chart.plotLeft, y: chart.plotHeight + chart.plotTop - yMax, width: xMax - xMin, height: yMax - yMin }); return false; } }, zoomType: 'x' }, xAxis: { }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); rectangle = chart.renderer.rect(0,0,0,0,0).css({ stroke: 'black', strokeWidth: '.5', fill: 'black', fillOpacity: '.1' }).add(); });
http://jsfiddle.net/meFgf/