score:6
It's just general idea: http://jsfiddle.net/r7fdh/ - you need to add checking if cursor is inside plot (use chart.plot[Left/Top/Width/Height]
) and you may need to use something else than event.page[X/Y]
for getting position.
Code:
$("#container").mousemove(move);
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
function move(event) {
var x = event.pageX,
y = event.pageY,
path = ['M', chart.plotLeft, y,
'L', chart.plotLeft + chart.plotWidth, y,
'M', x, chart.plotTop,
'L', x, chart.plotTop + chart.plotHeight];
if (chart.crossLines) {
// update lines
chart.crossLines.attr({
d: path
});
} else {
// draw lines
chart.crossLines = chart.renderer.path(path).attr({
'stroke-width': 2,
stroke: 'green',
zIndex: 10
}).add();
}
if (chart.crossLabel) {
// update label
chart.crossLabel.attr({
y: y + 6,
text: chart.yAxis[0].toValue(y).toFixed(2)
});
} else {
// draw label
chart.crossLabel = chart.renderer.text(chart.yAxis[0].toValue(y).toFixed(2), chart.plotLeft - 40, y + 6).add();
}
}
score:-1
Defaulty it is not possible, but you can set mouseover/mouse events and use renderer to add custom shape/object.
score:7
This is implemented in the Highstock API, see http://api.highcharts.com/highstock#xAxis.crosshair.label.
In order to use it with Highcharts, just load highstock.js and initialize a regular Highcharts: http://jsfiddle.net/highcharts/vmyau00g/
crosshair: {
label: {
enabled: true,
padding: 8
}
}
Source: stackoverflow.com
Related Query
- Highcharts crosshair with labels on axes
- How can I display crosshair labels on top of the chart with Highcharts
- How to prevent highcharts from shortening labels with ellipsis
- Highcharts - with datetime axis labels overlap
- Highcharts Column chart with drilldown, remove hyperlink like formatting from x-axis labels
- Highcharts - Issue with negative values when displaying multiple axes
- Highcharts v3.0.1 problems with rotating data labels in IE8 and jQuery v1.7.1
- Highcharts - Global configuration with common code and unique data & Headings
- Highcharts Y-Axis skipped labels when dealing with large array
- Highcharts multiple column chart with drilldown, correct formatting of drilldown axes
- Highcharts Gauge Chart with text labels
- Spiderweb Highcharts with multiple scales on multiple axes
- Replace axis labels with custom in highcharts r
- Highcharts zIndex issue with crosshair
- Highcharts synchronized charts with multiple axes datasets
- Highcharts redundant time data with multiple axes
- Left-align y-axis title with labels in Highcharts
- Highcharts grouped bar charts with multiple axes
- passing formatting JavaScript code to HighCharts with JSON
- Highcharts bug with labels
- Highcharts bar with negative stack: how to position data labels
- Highcharts timeline chart with multiple axes
- Formatting Highcharts labels with a callback function (Formatter)
- HighCharts - HightStock inverted axes with scroll navigator
- Highcharts - changing x-axis labels with rangeselector
- Highcharts series visibility with csv data source
- Highcharts format labels on grouped stacked bar diagram with $ k, M for currency and 'hrs' for time
- Highcharts issue when dealing with 3D pie and large labels
- Highcharts issue when dealing with 3D pie and large labels
- Fomatting labels on Y-axis in Highcharts with Data from HTML table
More Query from same tag
- Having Several Units on Highcharts Spiderweb
- Prevent source to load twice
- styling of particular segments in highchart axis
- Highcharts not able to access z value
- How can I add different icons in the legend
- Is there a way to call two function-based views from views.py from one url? - Django or even by using Class-based view
- Multiple xAxis on Highcharts
- Highcharts: Column chart with empty data
- align text on the left and the right in Highcharts
- Force Highcharts to use my min and max
- Caveats of highcharts-ng
- Django chartit loading jquery and highcharts js
- Hightcharts Packed Buble chartt for angular 6
- SyntaxError: JSON.parse: expected property name or '}' while using highcharts
- highcharts scatter change point color
- How to list dates (day-by-day) on xAxis using HighCharts
- Highcharts modulo alternateGridColor
- Highcharts yAxis title click
- Highcharts displaying additional information to each bubble points using array
- Highmaps: what is the code for a county?
- Highcharts - colorByPoint does not work
- Highcharts - how to toggle datalabels via js?
- Trouble showing results with pie highchart
- Pie chart taking more load time than line chart in highchart
- How can I restore original point symbols to highcharts?
- Pass data in np.dnarray to Highcharts
- highcharts Line color in the chart, in the legend and in the tooltip do not match
- Highcharts 5 tooltip colour with custom css class
- Can we change highcharts legend to work as radio button instead of checkbox style?
- return json arrays from symfony controller for many usage on highcharts.js