Highcharts mouse tracking/mouseover feature is slo

Question

We have a webapp built using Codeigniter and PHP which uses the Highcharts library and javascript/html on the client side and is deployed on IIS.

The Highcharts library renders various charts on a screen, 5 to be precise. Each chart renders data having not more than 1000 rows.

The charts are plotted fine, but when the mouse is hovered around the chart, the mouse over is displayed in frames(only on chrome). Please see image below showing the frame lags caused by mouse tracking.

Surprisingly this behavior is observed only on chrome but not in IE or firefox.

Can anybody help by suggesting how to overcome this bad mouse tracking on chrome. Highcharts has a mouse tracker disable option, but we loose interactivity and mouse over features if it is disabled.

Any help to overcome this or improve the mouseover frame rendering on chrome will be deeply appreciated.

Using Highcharts version 2.0.4 , Now updated to latest version 4.0.4

Tooltip code is below, using the basic tooltip option for box and area chart.

tooltip: {
            formatter: function() {
                        return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series '+ this.series.name;
                       //return "hello";
             }
        }

Answer 1

Found the problem, below is the fix.

We have to enable the "Disable layer squashing " option on chrome from here chrome://flags/#disable_layer_squashing

P.S Thanks to @SebastianBochan and @HristoValkanov for guiding me to the solution.

Answer 2

This was a bug in Webkit. Here is the official, Chromium bug report :

Bugs.Webkit : hover over table rows causes the whole table to repaint

This was fixed per the 2014-11-14 08:53:09 PST update of Webkit, as noted in the ticket above. This is only two months after the post by the OP.

If you are still having problems, for instance with drag and drop (like I am), then look at this bug report, still active and unresolved :

Bugs.Chromium : Drag and drop performance issue when using "position:relative" style with many cells

It has been active since: Mar 31 2014

What is the expected result?

• When the dragged object is over a cell, the cell should have a red background.

What happens instead?

• Drag and drop is very slow.

• Cells are sometimes displayed in red, but after a few seconds.

• Cursor pointer is not available during half a second after the drag end.