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
- Add html buttons and selects to Highcharts
- Highcharts and Extjs 4
- Rename the "slices" in Pie chart using Highcharts in shiny R
- Highcharts pie rendering in conflict with legend
- Joing multiple courtries in highmaps
- Highcharts area charts with single data, not rendering
- Use Highchart context menu provided in version v4.0.0
- Trouble showing results with pie highchart
- How to specify specific tick positions for highcharts when loading dynamic data?
- HighCharts X-Axis Date Not Working (00:00)
- Ember Highcharts Component throwing odd error
- Highcharts setting the colour of columns in each month period
- How to show/hide labels customizely in highcharts
- HighChart graphics with node js and react js
- Highcharts data from Google spreadsheet show line chart for one series
- Highchart can't be displayed
- Highchart Heatmap shows index number in YAxis
- Formating dollars with commas on Highcharts
- Highcharts duplicating Legend Tags
- Highcharts json with coinbase
- Only one highcharts using react-grid-layout can resize
- Can't set tooltip and legend dynamically in Highchart with Vue.js
- Highchart series did not draw
- Show PlotLine value on yAxis Highcharts
- json in to a variable and then pass it
- Highchart - Custom Images for Labels by using html
- How to do a if else statement for highcharts in laravel
- Highcharts. Add text at right side and export all into PDF
- how to make my series of axes as normal as highercharts width?
- highcharts destroy selected group annotation with button