I am currently utilizing highcharts to generate dynamic charts when hovering over a table row. My goal is to clear and hide the chart once the mouse moves away from the row.
While this functionality works smoothly in Chrome, I am encountering a strange issue in Firefox: The chart points remain visible even after the mouse has moved out. You can observe this behavior on .
If you hover over the table titled "National Quantities," you will notice a chart appearing upon hover and disappearing upon moving the mouse away, however, some dots are left behind on the table.
I am seeking assistance from anyone who might have an idea about resolving this issue.
Below is a snippet of the code I am using:
$(function(){
$('#district-quantity table tbody tr').hover(function(){
var row_data = //retrieve data related to the hovered row
var chartDiv = 'chart_div';
drawQuantityChart(row_data,chartDiv);
},function(){});
}
function drawQuantityChart(row_data,chartDiv) {
//invoke a function to parse and format the data for highcharts
var chartData = parseData(row_data);
var chart = new Highcharts.Chart({
chart : {
renderTo : chartDiv,
type : 'line',
height : 360
},
title : {
text : null
},
subtitle : {
text : null
},
xAxis : {
categories : chartData.periods
},
yAxis : {
title : {
text : null
},
gridLineWidth : 1,
min: 0
},
tooltip: {
followPointer: true
},
series : chartData.series
});
}
});