score:0
i found this old post in my search to ==>add a marker to a point when i click a Highcharts "Trend Line" [in examples: "line-time-series"] chart[when i click anywhere on the drawn line itself]. well, without showing you too much code, look in the
cursor: 'pointer',
point: {
events: {
click: function(e) {
alert("X("+this.x+"),Y("+this.y+")");
}//click
}//events
}//point
if you would like more detail, i'm happy to provide!
score:0
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
console.log(this);
alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' + this.series.name + ' ID: ' + this.config[2])
}
}
}
}
},
score:1
I had the same problem ... if I understand correctly. My solution is this, to get the id of the series ... See if it helps ...
plotOptions{
series:{
cursor: 'pointer',
events: {
click: function(event) {
console.log(event.point.series.userOptions.id);
}
}
}
score:3
To return the 'ID' of the selected point on the chart use the 'X' value:
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function(event) {
// Log to console
console.log(event.point);
alert(this.name +' clicked\n'+
'Alt: '+ event.altKey +'\n'+
'Control: '+ event.ctrlKey +'\n'+
'Shift: '+ event.shiftKey +'\n'+
'Index: '+ event.point.x);
}
}
}
},
See an example here: http://jsfiddle.net/engemasa/mxRwg/
score:11
I just did this by passing 3 objects into the series data array and then pulling it out of the object's config attribute from the click.
So you can construct your series data something like this:
series: [{
name: 'Example',
yAxis: 0,
type: 'spline',
data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]]
}]
In the data attribute above the 1st element is the date (x), the 2nd element is another data point (y), and the 3rd is the id of the object that represent that data object. This "z" will not show up on the graph but will show up as the 3rd element in the config array. For example: using plotOptions point attribute to capture the click, the ID of the object is in the alert as this.config[2]
plotOptions: {
series: {
cursor: 'pointer',
point: {events: {click: function() {console.log(this); alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' + this.series.name + ' ID: ' + this.config[2])}}}
}
},
score:16
According to the docs, event.point holds a pointer to the nearest point on the graph.
So I'd write the event.point
to the console, and see what's available.
console.log(event.point);
click: Fires when the series is clicked. The this keyword refers to the series object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. Additionally, event.point holds a pointer to the nearest point on the graph.
Example based on the example from the docs: http://jsfiddle.net/5nTYd/
Click a point, and check the console.
Source: stackoverflow.com
Related Query
- Highcharts => Getting the id of a point when clicking on a line chart
- How to bring up tooltips in a line chart when the points are on the same point x
- Highcharts showing points on hovering over the line which are outside the chart area when the chart is zoomed in
- Using Highcharts and displaying a message over or on the chart when there is no data
- Highcharts - Scatter chart with a line connecting the dots in the series
- Get name of clicked point in Highcharts when the point has drilldown
- Highcharts column + line combination chart with multiple series. Issue aligning line over the column
- Highcharts - Rotate pie chart aligning the clicked section to a fixed point (180°)
- Highcharts stock chart - Technical Indicators - Stock price is missing in the tooltip when selecting the 'All' range
- Why do I have the issue 'property assigment expected' when I want to display a chart on my web page using highcharts
- Highcharts - how to do a responsive pie chart when the texts of the labels are long
- Highcharts add point to line chart with json
- How to render a vertical line when the mouse cursor is on the chart using highcharts?
- Highcharts line chart all points disappear when have more than one points with same X Axis
- Highcharts Bubble Chart - How to get the size of the point
- change datalabels color in a HighCharts chart when hovering without updating the series
- Disable line from tooltip to point location on the chart
- Click a point on a highcharts graph from outside of the chart
- how to continue the graph line when missing series of data in middle of highcharts
- Draw a vertical line when clicking on the series in highcharts.
- How do I plot the x axis line using Highcharts when pegged at 0?
- HighCharts : Tooltips exist but line is not drawn in the chart
- Highcharts line chart: point should be clickable, the line between the points not. Is that possible?
- HighCharts title styles i.e textDecoration property not applying when we export the chart using canvg
- How do i color the highcharts legend square symbol when my chart has multiple color entries
- highcharts - Draw horizontal line outside the chart area
- When adding point on dynamically created Multiple Highchart Graphs on a single page, the plot line draws to the start point instead of last point?
- Highcharts ( stockchart series line is not connecting to the last point
- highcharts not displaying line when last point is before current x Axis minimum and next point is after current X Axis maximum
- Highcharts Line Chart - Hyperlink on a data point
More Query from same tag
- Highchart series update in javascript
- Disable hover on HighCharts
- How to change font size of chart title in downloaded pdf with jspdf
- Highcharts nodeName of undefined
- highcharts, Set minimum height for stacked column chart?
- Creating A MultiSeries Bar Chart With Different Number of Series For Each Item
- Tooltip to display middle points in a series in highcharts
- Highcharts - How to combine unique legend for multi-series pie chart which perform same action for both series? (like onclick: show/hide)
- Highcharts not working on webpage
- Reverse Axis in Highcharts get data from table
- Display overlapping ranges in columnrange chart stacked instead of overlapping
- Show specific data in the highchart's title
- Highcharts: how to export several charts from the browser?
- How to work with Highcharts in AngularJS
- Managing Data to Highcharts from Webservice
- Highcharts - Suppress points being dragged on drag event
- Highcharts x-axis label automatic grouping
- MS Surface tablet IE10 with Highcharts scroll page issue
- Stochastic on a weekly basis
- highcharts is not showing
- Highcharts pie dataLabels inside and outside
- Highcharts title animation
- Highcharts component that creates secondary yAxis based on props.boolean
- Hide series used for navigator in highstocks breaks navigator
- Highcharts how to show certain tooltips and don't show others
- How can I force multiple y-axis in Highcharts to have a common zero
- Highcharts threshold background color from 100 y-axis
- How to join geojson + CSV file with omnivore leaflet in Mapbox to map data as polygons?
- Highcharts: useHTML for labels creates empty label div every time Axis.update() is called
- How to display raw decimal numbers on tooltips in Highcharts.js