Highcharts tooltips flickering ON IE8

Question

enter image description hereHi I am using below code to plot the charts througs Highchart API. By this tooltips are working fine on firefox and also on chrome but on IE tooltips are flickering. and as we move mouse tooltips remain for some sort of time while other has appear.

$(document).ready(function(){
                var chart=new Highcharts.Chart({
                            chart : {
                               zoomType: 'xy',
                               spacingRight: 20,
                               renderTo : "container",
                               type : graphType
                            },
                            tooltip: {
                                enabled: true,
                                followPointer: true
                            },
                            title : {
                                text : graphTitleForChart
                            },xAxis : {
                                type: 'datetime'  
                            },credits: {
                                enabled: false
                            },
                            legend: {
                                align: 'right',
                                verticalAlign: 'middle',
                                layout: 'vertical'
                            },
                            yAxis : {
                                min : 0
                            },
                            plotOptions :{
                                area: {
                                 stacking: 'normal',
                                 lineColor: '#666666',
                                 lineWidth: 1,
                                 marker: {
                                    enabled : false,
                                    symbol : 'circle'
                                    }
                                },
                                column: {
                                 stacking: 'normal',
                                 pointPadding : 0,
                                 lineColor: '#666666',
                                 lineWidth: 0,
                                 marker: {
                                    enabled : false,
                                    symbol : 'circle'
                                    }
                                },
                                pie: {
                                 allowPointSelect : true

                                },
                                line: {
                                 marker: {
                                    enabled : false,
                                    symbol : 'circle'
                                    }
                                },
                                series: {
                                    events: {
                                        legendItemClick: function(event) {

                                            var seriesIndex = this.index;
                                           var series = this.chart.series;
                                           if(this.name == 'Select All'){

                                                if(this.visible){
                                                    for (var i = 0; i < series.length; i++)
                                                    {
                                                        series[i].hide();
                                                    }
                                                }else{
                                                    for (var i = 0; i < series.length; i++)
                                                    {    
                                                        series[i].show();
                                                    }
                                                }
                                                return false;    
                                           }else if(series.length > 1){

                                               var i;
                                               for (i = 0; i < series.length; i++)
                                               {    
                                                   if(!series[i].visible){
                                                        break;         
                                                   }
                                               }  
                                           }

                                        }
                                    }
                                }    
                            },
                            series : arrSeries
                });

            });

In this, graphType will containe either of 'area','column','pie','line' .
Please tell me what's wrong in this. Also when all the graph series have 0 values then at y-axis 0 line shows in the middle of y-axis, how can I fix origin of Y and X axis to (0,0)

could you please tell me how to attach the object. I have firebug in firefox, and IE developer tools both. and I have write the data which is in the arrSeries in post, but not the name part — agarwal_achhnera
How your arrSeries looks like, which values have? You can use console.log(arrSeries); — Sebastian Bochan
Could you test this exmaple jsfiddle.net/SYFbu problem also appears? I used HC 3.0.2 and I cannot reproduce this issue, Whcih version of IE8 do you have? — Sebastian Bochan

cfs cfs · Accepted Answer · 2013-06-19T12:58:09

I had a similar issue caused by IE8 being in Quirks Mode. This is most likely happening because you haven't specified a doctype.

Use <!doctype html> to change to Standards mode and resolve the issue.

Highcharts tooltips flickering ON IE8

3 Answers