Is this a bug in JSFiddle and Codepen, or in Highcharts, or a limitation of Javascript?

Question

I am creating a heatmap with Highcharts. I tested on a 5x5 map and I get the expected heatmap.

I then tested a larger one and the resulting heatmap is incorrect. I also tried it in CodePen, with same (incorrect) result.

Something strange is also happening somewhere in the large Array when using Codepen: (see this answer for that point, which explains why the highlighting stops)

I have a few possibilities:

• it could be a browser problem. I tested with Chrome and Firefox and get the same error
• it could be a JavaScript limitation on the size of the Array (the highlighting of the code is chnaging in Codepen so maybe). It looks like it is not.
• it could be a bug in JSFiddle and Codepen. I doubt it as the issue is the same in both sandboxes.
• it could be a bug with Highcharts. This I do not know - my code is not exotic (even though somehow large) so that should have been caught earlier. But this one looks like the most probable.

This is a fake snippet as the question requires one but it is not useful in this case

Answer 1

CodeMirror (which is the editor of codepen) support the maxHighlightLength, which tells the editor the maximum length of characters the editor should highlight.

The default value of that variable is 10000, and in your specific case the line is longer than this value.

Answer 2

Issue here is that you need to tell highcharts the scale of the yAxis. To do this set it to the min = 0 and max = the number of categories - 1:

...
  yAxis: {
    categories: ['10.233.86.12', '10.233.84.72', '10.2.0.71', '10.90.13.175', '10.233.84.57', '10.91.66.24', '255.255.255.255', '224.0.0.252', '10.233.86.34', '10.233.80.60', '10.112.0.142', '10.35.24.33', '10.130.37.22', '10.20.3.16', '10.233.84.83', '10.70.1.79', '10.6.41.78', '10.89.3.109', '10.118.68.133', '192.168.0.11', '10.70.0.253', '10.10.68.56'],
    title: null,
    min: 0,
    max: 21
  },
...

Note that you should also tell it to show every category which should be done by increasing height of chart so labels do not overlap.

Answer 3

It is not a bug. Simply the number of points exceeds the default value of the turboThreshold property (see the API Reference section). Increase the number of the turboThreshold and heatmap will display correctly.

API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.turboThreshold

Example:
http://jsfiddle.net/p4z094g9/