score:1
Accepted answer
There is no such feature in Highcharts, but you can implement it by enabling sticky tracking and process the internal getHoverData
method only if a hovered point is close enough to a mouse cursor. Example:
(function(H) {
H.wrap(H.Pointer.prototype, 'getHoverData', function(proceed, existingHoverPoint, existingHoverSeries, series, isDirectTouch, shared, e) {
var hoverData = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var RADIUS = 20;
var point = hoverData.hoverPoint;
var chart = this.chart;
var plotX;
var plotY;
if (point) {
plotX = point.plotX + chart.plotLeft;
plotY = point.plotY + chart.plotTop;
if (
plotX + RADIUS > e.chartX && plotX - RADIUS < e.chartX &&
plotY + RADIUS > e.chartY && plotY - RADIUS < e.chartY
) {
return hoverData;
} else if (chart.hoverPoint) {
chart.hoverPoint.setState('');
chart.tooltip.hide();
}
}
return {
hoverPoint: null,
hoverPoints: [],
hoverSeries: null
};
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/sb35j0ov/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Source: stackoverflow.com
Related Query
- Highcharts increase hover detection for markers
- Color individual markers on hover in Highcharts
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- highcharts dataLabels support RTL with enable hover it for show tooltip
- How to enable marker on hover only for a range of points in highcharts
- Highcharts display label for pie chart using html table as data source
- Simple, Open source PHP wrapper for Highcharts library
- HighCharts - Enable the markers for the series which has only single data point?
- How to make hover effect for two bar in highcharts at the same time is there any way by using css or any inbuilt method to achieve this?
- HTML table as data source for highstock charts using highcharts
- Including source for Alchemy js breaks Highcharts js
- Format used for date in Highcharts - Line with markers chart type
- Highcharts markers on legend and hover ONLY
- Highcharts has missing markers at the top for very specific heights
- Using a flask variable as data source for highcharts
- Highcharts Interactivity between plots - looking for code improvements
- Highcharts tooltip for single series always centre. Can I force it to be left hover of the marker?
- Error: Data source must be a URL for refresh | console error | javascript | Highcharts
- formatting all the markers for the hovering series in a HighCharts scatterplot
- Use Node.js as data source for highcharts
- What is the solution for Highcharts hover
- How to increase weight of wordcloud for weight value less than 5 in highcharts
- Highcharts - hover event handling for tooltip throws exception
- Highcharts legend hover for bar chart?
- Highcharts - disable hover for slices on pie chart
- add markers for specific values in streaming multi line in highcharts
- Point markers for arearangespline chart in Highcharts
- Enabling markers for hover doesn't appear to work
- HighCharts turn animation false for line chart
- set different colors for each column in highcharts
More Query from same tag
- Highcharts - Column Chart Drilldown, how to change the drilldown bar color based on some value
- How to show annotation for every point on highchart then disappear them
- Highcharts - how can I change font size?
- Stacked y-Axis on Highcharts, how to make it one?
- HighStock "xRange" chart is not working with older version library(HighStock)
- after using for loop all my column graphs are plotted in single color i need each bar in different color in highcharts
- Display labels on minor tick in Highcharts when using tickInterval
- Dynamic High Charts in Angular
- How to increase the height of highchart?
- How to refresh pane background when update date on gauge highcharts?
- IE8 Errors On chart.destroy()
- Highcharts Error while loading solid gauge module
- Bar chart label alignment for all the zero values
- Javascript - Convert timestamp into milliseconds for Highcharts Y axis
- How to send json to highcharts from php
- How to send JSON using JSF2 Primefaces Request Context to Highchart?
- How can I use the chart.addButton() method?
- How to convert datetime string to UTC to plot points on Highcharts
- Interaction with multiple charts in a page
- Highcharts series gap auto zipping
- Why did the Highcharts export menu disappear when I moved the button?
- Pass data from objects to an array
- Possible to force Highcarts to use the circle symbol for all the series in a line graph?
- Show tooltips of piechart when hover outside of the chart on a button
- Issue with json data mapping with Highcharts
- HighCharts doesnt get data from Flask endpoint
- Javascript, using Highcharts to display a chart of rankings with JSON Data
- Highcharts, type: 'mapbubble' causes an error 17
- Highcharts datetime format y-axis interval
- Highstock weird y-axis scale difference in same data dual series