score:2
Accepted answer
I would up just using a CSS selector: .highcharts-legend-item:first-child:hover { cursor:crosshair; }
score:0
I make it actually with modal with mouse hover event, This is how you can do this, please insert this code in your chart function:
$('#chart_container').on('mouseenter','.highcharts-legend-item',function(event) {
var seriesName = $(this).text();
if (seriesName === "this_series_name") {
$('#myModal').modal('toggle');
}
});
Then you can make a modal div to open with hover event like this one below
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Note</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
your message here
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Ok
</button>
</div>
</div>
</div>
</div>
this is a demo
Source: stackoverflow.com
Related Query
- Highcharts legend item hover event?
- Highcharts Stacked Area: legend hover event
- How to modify highcharts legend item click event?
- Highcharts - manually trigger hover event on a point
- Highcharts - Legend item padding
- Set custom legend item symbol (or icon) in HIghcharts
- Border around legend item in highcharts
- Disable legend hover in Highcharts
- Highcharts angular Get Legend Item Status
- Toggling legend text click event in highcharts
- Highcharts -- Dynamically apply "halo" effect to points without triggering hover event
- dynamically change fontWeight on a legend item Highcharts
- Disable Plotpoint legend on hover in Highcharts
- Auto focus on a legend item in highcharts
- Highcharts markers on legend and hover ONLY
- Load event issue: unable to add hover event on pie chart's legend
- How to capture the hover event in highcharts labels?
- Highcharts Legend item text alignment
- Hiding legend item box when using check box in Highcharts
- Highcharts hide legend item from Pie chart
- Click on Highcharts pie rendering border although legend item click is disabled
- Hide linked series on legend hover in Highcharts
- Highcharts Legend event click to get data
- Grey out item in Highcharts legend
- Use mouseover event in Highcharts Legend to show hidden div
- Highcharts - How to Make the legend item width half of the contianer?
- Edit click event on Highcharts Legend
- Highcharts styledMode with highcharts.css import causes pie legend hover to apply to all legend items
- Highcharts : Info about clicked legend item pass to controller
- Highcharts - hover event handling for tooltip throws exception
More Query from same tag
- onclick popout highchart piechart
- Highstock : update xAxis events
- Parsing to milliseconds changes date
- Multiple Charts not moving in sync at random times when adding value on interval
- Can't add nice shading to highcharts
- Unable to do any other action than "alert" when triggering the click event on Highcharts (React Native)
- Highcharts line chart tooltips not showing correctly?
- Highcharts: How to show marker in X range chart?
- How to display non-graphed data from CSV file in Highcharts' tooltip?
- How to fetch data into highchart in react app
- Highcharts dynamic set category update the chart but shows only points but not lines
- Remove antialiasing on Highcharts curves
- How to draw SVG shapes at a specific position (dependent on the xAxis)
- Zoom in Highmaps based on Lat/Long
- R highcharter get data from plots saved as html
- highcharts,highstock,symbol is undefiend
- Highcharts: how to maintain the same order of category labels when bar chart changes to column chart
- How can hide the icon legend
- Trying to add a button to a iframe HighCharts document, chart variable not found
- How to color places with single dots in area chart - highcharts?
- Why can't I change the cursor to "progress" before performing some script in jQuery?
- Highcharts: Datalabels outside when unsufficient space inside, using Google spreadsheets
- Returning javascript in an ASP.NET ajax postback fails, but works fine on initial page load
- set chart type property in devexpress chart control c#
- Highcharts Auto Calculate Multiple Series Position
- Create a vertical navigator to zoom in Highchart
- Highstock + angular material + flex-layout problems
- Compare one month of two year with Highcharts
- How to make highchart clickable?
- Highcharts change dataset