score:1
Accepted answer
tl;dr
here's a live demo - http://jsfiddle.net/vu96fr9h/2/
first thing, your series
does not contain data. for this example, i initialized it with the following:
series: [{
name: 'average',
data: [{
id: "point-1",
x: 1,
y: 49.9
}, {
id: "point-2",
x: 2,
y: 71.5
}, {
...
next, you can set up a click event on a point by extending your chartconfig
object like so:
options: {
plotoptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(e) {
var point = {
x: this.x,
y: this.y,
id: this.id
}
$scope.$apply(function() {
$scope.selectedpoint = point;
});
}
}
},
marker: {
linewidth: 1
}
}
},
...
the click will store the point metadata in $scope.selectedpoint
. you can add a $scope.$watch
to get a notification when it changes:
$scope.$watch('selectedpoint', function(newvalue) {
// here you can fetch more info about this point from the server
console.log(newvalue);
});
the view will display what you want based on $scope.selectedpoint
. it may be a secondary graph or plain metadata as text.
Source: stackoverflow.com
Related Query
- onclick on spiderweb chart open new one for details
- highcharts - chart names for multiple pie chart series in one chart
- Set background color for only one pane in multi-pane Highstock chart
- Highcharts - where to place style and changing style for one wedge in a pie chart
- Highcharts display label for pie chart using html table as data source
- Simple, Open source PHP wrapper for Highcharts library
- Bar chart in High chart for indication of value with two colors in each bar where one color is always kept fixed
- Onclick redraw the chart with new values in bar chart
- HighCharts Line Chart draw y axis line for entire line points and only one line
- High Chart different color for one column
- Highcharts backgroundColor for multiple charts is only applied to one chart
- ECharts how to set different symbol for different marklines in one chart
- Highcharts 'bindAxis' for one chart only
- How to open chart in new tab?
- High Charts for an area-spline chart with area fill on only one data set in series
- Highstock Chart with URL in flag text won't open in new window
- Onclick of a org chart another org chart will open as a modal popup
- Highcharts - Resizeable y-axis as one for Candlestick & Volume chart
- Highcharts datalables enabled for one series and one point on the chart via chart function
- Create a new chart for each new page
- One Average Spline for each Column in Highcharts Combination Chart
- How to open new chart to the adjacent <div> on bar click in highchart
- Highcharts data from Google spreadsheet show line chart for one series
- How do I hide the code for the chart data in highcharts?
- HighCharts turn animation false for line chart
- Highcharts percentage of total for simple bar chart
- Highcharts saying undefined is not a function when trying to add a new chart
- How to open credits url of highcharts in new tab
- How to create a new Highstock chart with new Highchart and not jquery?
- Highcharts not displaying data labels for Pie chart in arabic
More Query from same tag
- Highstock - Pulling data from JSON file
- How to fetch json array data into highcharts in angularjs
- Custom series connecting line
- How show all tooltips split in graph with many series
- Drilldown on label in spiderweb graph
- what is wrong in this data series that high chart does not plot it?
- How to render overall data labels using highcharts?
- highcharts redraw() with function that references newly redrawn chart
- React useState throws error on Highcharts mouseOver
- Highstock: custom x-Axis with multi time labels?
- how to make different label for different arrows in Gauge chart in highchart
- Integrate Ember-widgets Highchart in Jinja2 template
- Is there any way to define the indivdual dataLabels connector width in a pie chart
- Bootstrap - Highcharts not showing
- Swap Y Axis in Highchart
- Basic Javascript: How can I link my HTML and Javascript on a Highcharts example?
- how can i add in highcharts a different dashStyle just for a part of the graph
- How to set xAxis only with time in Highstock step graph
- How to set language on highcharts.client.Chart
- Change color code on colum, depending on data value (highchartJS)
- Highchart : by passing FROM DATE and TO DATE x axis labels should set
- Highstock innacurate rendering of line data series
- Highcharts does not display when a line of PHP header('location...') is added
- How to get data in Highstock from PHP MySQL data on AJAX call
- How to hide a specific x-axis label programmatically?
- How to change line color between points dynamically?
- Series with different time ranges in Highcharts
- Calling function 'ChartModule', function calls not supported
- Highcharts overflowing parent div Angular
- the milliseconds data is not present in the history data of highcharts