score:1
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/
Source: stackoverflow.com
Related Query
- Emulating multiple click functions or have separate clicked values based on specific areas below or above dataMin and dataMax - highcharts
- Highchart (basic line chart) which can have multiple values vs x axis?
- How to have multiple highcharts with different series data in vuejs without repeating code
- highcharts pass multiple values to tooltip
- How can I force multiple y-axis in Highcharts to have a common zero
- Highcharts: Is it possible to have separate plotOptions for each series?
- Highcharts: Conditional tooltip based on multiple series names (OR logic operator)
- Highcharts - Issue with negative values when displaying multiple axes
- Changing color of spline lines based on values in HighCharts
- Change Datalabel Color, Rotation and Align values based on Column value in highcharts
- Highcharts: Plot multiple values in single category
- Multiple y-axes causing range to have too much padding
- Highcharts area spline values have incorrect position on y-axis
- Click events on highcharts with multiple series
- AJAX displaying values from two different functions in a single Highcharts chart instead of two different ones
- Expose additional data based on xAxis element click - Highcharts.js
- Highcharts Custom display of tooltips, based on data series values
- Showing marker for separate values only in line chart in HIghchart
- Highcharts: Is it possible to have a single series exist in multiple stacks in a grouping
- highcharts change rendered image source on click
- HighChart : plot line click event for multiple chart
- Accessing functions in a highcharts click event in an ionic project
- passing json values to highcharts from .net code behind
- Can I have multiple plotlines with Highcharts?
- Is it possible to have multiple highcharts with one id?
- Highcharts fill map based on data values with React TypeScript
- Highcharts: How to display multiple tooltips by click in multiple series with shared true
- Have Highcharts tooltip disappear on click
- Line chart does not connect dots if they have gaps in values between in serie object
- Have an issue with JavaScript, AJAX code displaying data
More Query from same tag
- HIghCharts PHP MySQL
- How to use a 'plotWidth' calculation to position a highcharts pie
- Highcharts Column-chart with php and Ajax
- Creating a line graph with highcharts and data in an external csv
- Using columnrange chart type in Highcharts with custom output?
- Pie Piece Too Small
- Highcharts: Cannot get example to display chart
- Javascript/Jquery/Gantt Highchart : On clicking over a task progress pop-up should get open
- Load highcharts data with laravel and ajax
- Scatter chart with simple liner regression
- all bar should be of same height . data part should be coloured and rest should be grayed
- Angular 8 highcharts How to pass custom data to drilldown event in Highcharts
- Highcharts bar zoom issue when using transparent series
- Multiple series in drilldown
- Highcharts: replace custom button image on hover
- Multiple charts with same data not loading in same page: Highcharts
- merge a few lists and regroup them into a dictionary to plot to multi-series Highcharts
- Highchart: How to change y-axis title text inside angularjs controller?
- Highcharts : Two marker symbol for the same point
- Highcharts - add border radius to boxplot chart
- D3Js donut chart, avoid label text overlay's
- How to remove a gap in high charts graph with two yAxis
- How to move the legend in Highcharts
- How to create highlight area under curve in high chart?
- Highcharts live data not updating after changing PHP variable
- HighCharts - Y-Axis padding in a bar chart
- Mouse wheel event, not working as expected in Firefox, when using Highcharts with PerfectScrollbar
- Highchart save chart image using cURL
- Highchart on mobile (Touch to zoom out and zoom in) - LineChart
- Highcharts to populate data for pie chart using json object