Search code examples
javascripthighchartstooltip

Tooltip for Highcharts graph shows "undefined" in Chrome, but the correct value in Firefox

Ah, these different behaviours in the browsers... My tooltip is being displayed correctly in some browsers (Safari, Firefox on Mac) but not in others (Chrome on Mac). Why is that?

The tooltip looks like this:

tooltip: 
{
    snap: 0  ,
    useHTML: true,
    padding: 0,
    formatter: function () 
    {
        return this.point.name + '/' + this.series.name + '<br>' 
        + '<b>' + this.y + '</b> Million km<sup>2</sup>';
    }
},

The code of the data (CSV file) looks like this:

Day,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,Average_1981_2010
1/Jan,,,14.238,14.288,,14.257,,,14.036,,,14.261,14.319,13.634,14.069,14.039,14.094,14.144,13.804,13.657,14.025,13.823,13.442,13.479,13.59,13.647,13.502,13.16,13.16,13.11,13.206,13.189,13.205,12.896,13.353,12.959,13.011,13.054,12.732,
2/Jan,,14.997,,,14.505,,14.106,14.069,,14.305,,14.313,14.384,13.831,14.092,14.141,14.11,14.258,13.818,13.801,14.097,13.886,13.539,13.385,13.628,13.698,13.538,13.163,13.21,13.207,13.164,13.18,13.232,12.915,13.421,12.961,13.103,13.127,12.809,13.795
3/Jan,,,14.327,14.503,,14.306,,,14.292,,,14.402,14.283,13.847,14.141,14.25,14.042,14.335,13.786,13.837,14.262,13.884,13.63,13.418,13.598,13.876,13.502,13.293,13.267,13.182,13.19,13.267,13.254,12.926,13.379,13.012,13.116,13.082,12.789,
4/Jan,,14.922,,,14.655,,14.237,14.24,,14.417,,14.417,14.321,13.858,14.072,14.255,14.168,14.288,13.791,13.864,14.277,13.913,13.657,13.51,13.623,13.925,13.59,13.313,13.307,13.252,13.275,13.286,13.236,13.051,13.414,13.045,13.219,13.059,12.873,13.875
5/Jan,,,14.414,14.459,,14.494,,,14.489,,,14.381,14.303,13.872,14.185,14.266,14.231,14.304,13.839,14.016,14.217,13.89,13.678,13.566,13.683,14.036,13.617,13.383,13.314,13.361,13.303,13.352,13.337,13.176,13.417,13.065,13.148,13.145,12.889,
6/Jan,,14.937,,,14.901,,14.262,14.421,,14.515,,14.359,14.407,13.958,14.254,14.22,14.303,14.325,13.877,14.139,14.263,14.044,13.806,13.722,13.645,14.075,13.594,13.324,13.265,13.403,13.325,13.447,13.458,13.169,13.404,13.126,13.142,13.148,13.052,13.974
7/Jan,,,14.533,14.714,,14.51,,,14.533,,,14.419,14.497,13.976,14.282,14.348,14.381,14.364,14.007,14.188,14.304,14.089,13.761,13.846,13.875,14.092,13.631,13.452,13.301,13.51,13.411,13.478,13.499,13.173,13.477,13.202,13.243,13.171,13.19,

The tooltips look like this:

Correct:

enter image description here

Wrong:

enter image description here

What can I do?

Thanks for any hints!

Solution

  • Looking at your fiddle, I would say the tooltip is a minor problem. The hole graph renders useless in Chrome. Look at the x-axis, it only shows one point.

    X-axis has only one point

    Chrome seems to have a problem with the point names including a slash. By changing the first 01/Sep to 01\Sep, it magically renders fine. See here https://jsfiddle.net/trn_/qL191acq/ I cant offer more than a minor hack to replace the \ to / via the x-axis label:

    xAxis: {
    labels: {
      formatter: function(){
        return this.value.replace("\\", "/");
      }
    }

    Btw, I was testing on Chrome Version 48.0.2564.116 Ubuntu 15.10 (64-bit). Good luck!