score:1

Accepted answer

I made a very basic example showing how to get to the values you need. The actual code and logic should not be too hard to figure out from here.

The following code will give you clicked yValue, and the current extreme values in the console. Working fiddle

chart: {
    events: {
        click: function (event) {
            console.log(event.yAxis[0].value);
            console.log(chart.yAxis[0].getExtremes());
            this.update({yAxis: {max: event.yAxis[0].value}}) 
        }
    }
}

To explain a bit more:

event.yAxis[0].value gives the yValue according to the yAxis, see API on chart.events.click.

chart.yAxis[0].getExtremes() gives the yAxis extremes, both the graph area extremes and the data(points) extremes, see API on Axis.getExtremes

this.update this refers to the chart, update lets you update whatever you may want to on the chart, see API on Chart.update. Here we use it to set the yAxis max to the value of the location clicked.

score:0

Simply enable zooming by setting zoomType property with 'x', 'y' or 'xy'. You can get min and max of selected area in selection event.

API Reference:
http://api.highcharts.com/highcharts/chart.zoomType
http://api.highcharts.com/highcharts/chart.events.selection

Example:
http://jsfiddle.net/uLsx8pz6/


Related Query

More Query from same tag