Highcharts Treemap Data Labels issue in IE & Chrome - highcharts

Question

It is observed that the Data Labels in Highcharts Treemap visible/disappear based on the browser. Fiddle here
In this example, the Title2 (in right-most box) is not visible in Chrome but visible in IE 11. The visibility can be changed either by changing the width of the chart or by dragging the fiddle slider (vertical). This is not consistent though. Is my observation correct? If so how do i fix this?
One more observation that by adding useHTML: true in Level2 DataLabels the labels can be seen.
$(function () {
var data = [{
"id": "Title1_Grp_Id0",
"name": "Title1",
"value": 14979,
"fqn": "MySelFqn.Title1",
"levelName": "Plant",
"path": "Title1"
}, {
"name": "Error",
"fqn": "MySelFqn.Title1",
"totalEventCount": 14616,
"totalDowntime": 457.0799999998797,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title1_Grp_Id0",
"value": 14616,
"eventType": "Error"
}, {
"name": "None",
"fqn": "MySelFqn.Title1",
"totalEventCount": 363,
"totalDowntime": 53017.05748111113,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title1_Grp_Id0",
"value": 363,
"eventType": "None"
}, {
"id": "Title2_Grp_Id1",
"name": "Title2",
"value": 2173,
"fqn": "MySelFqn.Title2",
"levelName": "Plant",
"path": "Title2"
}, {
"name": "Error",
"fqn": "MySelFqn.Title2",
"totalEventCount": 1242,
"totalDowntime": 80.18999999999983,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 1242,
"eventType": "Error"
}, {
"name": "None",
"fqn": "MySelFqn.Title2",
"totalEventCount": 919,
"totalDowntime": 45174.184894999984,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 919,
"eventType": "None"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title2",
"totalEventCount": 11,
"totalDowntime": 48,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 11,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title2",
"totalEventCount": 1,
"totalDowntime": 18.93,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 1,
"eventType": "Breakdown"
}, {
"id": "Title3_Grp_Id2",
"name": "Title3",
"value": 5246,
"fqn": "MySelFqn.Title3",
"levelName": "Plant",
"path": "Title3"
}, {
"name": "None",
"fqn": "MySelFqn.Title3",
"totalEventCount": 4686,
"totalDowntime": 48073.08156194443,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 4686,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title3",
"totalEventCount": 508,
"totalDowntime": 38.6000000000001,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 508,
"eventType": "Error"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title3",
"totalEventCount": 34,
"totalDowntime": 4215.05122361111,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 34,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title3",
"totalEventCount": 18,
"totalDowntime": 738.9399999999999,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 18,
"eventType": "Breakdown"
}, {
"id": "Title4_Grp_Id3",
"name": "Title4",
"value": 1418,
"fqn": "MySelFqn.Title4",
"levelName": "Plant",
"path": "Title4"
}, {
"name": "None",
"fqn": "MySelFqn.Title4",
"totalEventCount": 634,
"totalDowntime": 50563.53225749999,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 634,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title4",
"totalEventCount": 467,
"totalDowntime": 69.8700000000002,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 467,
"eventType": "Error"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title4",
"totalEventCount": 223,
"totalDowntime": 11325.920000000001,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 223,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title4",
"totalEventCount": 88,
"totalDowntime": 545.9000000000002,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 88,
"eventType": "Breakdown"
}, {
"name": "Planned",
"fqn": "MySelFqn.Title4",
"totalEventCount": 6,
"totalDowntime": 790.7,
"color": "rgb(51,51,255)",
"id": "Planned_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 6,
"eventType": "Planned"
}, {
"id": "Title6_Grp_Id4",
"name": "Title6",
"value": 796,
"fqn": "MySelFqn.Title6",
"levelName": "Plant",
"path": "Title6"
}, {
"name": "None",
"fqn": "MySelFqn.Title6",
"totalEventCount": 429,
"totalDowntime": 83003.57523555551,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 429,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title6",
"totalEventCount": 290,
"totalDowntime": 26.28000000000002,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 290,
"eventType": "Error"
}, {
"name": "Planned",
"fqn": "MySelFqn.Title6",
"totalEventCount": 5,
"totalDowntime": 171.2,
"color": "rgb(51,51,255)",
"id": "Planned_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 5,
"eventType": "Planned"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title6",
"totalEventCount": 19,
"totalDowntime": 1893.2799999999997,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 19,
"eventType": "Breakdown"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title6",
"totalEventCount": 53,
"totalDowntime": 5577.799999999999,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 53,
"eventType": "Standby"
}, {
"id": "Title5_Grp_Id5",
"name": "Title5",
"value": 1287,
"fqn": "MySelFqn.Title5",
"levelName": "Plant",
"path": "Title5"
}, {
"name": "None",
"fqn": "MySelFqn.Title5",
"totalEventCount": 936,
"totalDowntime": 58452.91053249994,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 936,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title5",
"totalEventCount": 277,
"totalDowntime": 25.760000000000015,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 277,
"eventType": "Error"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title5",
"totalEventCount": 32,
"totalDowntime": 373.01999999999986,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 32,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title5",
"totalEventCount": 42,
"totalDowntime": 185.20999999999995,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 42,
"eventType": "Breakdown"
}, {
"id": "Title7_Grp_Id6",
"name": "Title7",
"value": 1765,
"fqn": "MySelFqn.Title7",
"levelName": "Plant",
"path": "Title7"
}, {
"name": "None",
"fqn": "MySelFqn.Title7",
"totalEventCount": 1219,
"totalDowntime": 64004.68101777776,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 1219,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title7",
"totalEventCount": 411,
"totalDowntime": 52.79000000000006,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 411,
"eventType": "Error"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title7",
"totalEventCount": 44,
"totalDowntime": 3863.4999999999995,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 44,
"eventType": "Breakdown"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title7",
"totalEventCount": 86,
"totalDowntime": 13847.970000000003,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 86,
"eventType": "Standby"
}, {
"name": "Planned",
"fqn": "MySelFqn.Title7",
"totalEventCount": 5,
"totalDowntime": 86.52999999999998,
"color": "rgb(51,51,255)",
"id": "Planned_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 5,
"eventType": "Planned"
}]
$('#container').highcharts({
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true,
//align: 'left',
//verticalAlign: 'top',
//color: 'rgba(255, 0, 0, 1)',
shadow: false,
//color: "rgb(255, 255, 255)",
style: {
fontSize: '15px',
color:'red'
//fontWeight: 'bold',
//opacity:1
//zIndex: 99999
},
},
borderWidth: 5
}, {
level: 2,
dataLabels: {
//useHTML: true, //enabling this changes this behaviour
enabled: true,
shadow: false,
color: "rgb(255, 255, 255)"
},
borderWidth: 5
}],
data: data
}]
});
});

Answer 1

There is a default dataLabels collision detection logic in use and lebels that are overlapping each other will be hidden. It seems that in IE11, because of browser differences, different dataLabel gets hidden than in Chrome. See JSFiddle with allowOverlap set to true to notice that labels are overlapping each other: http://jsfiddle.net/jgnktcvr/
When you will set useHTML: true in second level of dataLabels, then sizes of labels will change and in that case both charts will look the same.
A solution might be to set labelrank for each point or for the one that are important, that way you can control which labels will be hidden in case of an overlap.
JSFiddle: http://jsfiddle.net/zgqr0ozv/5/
Other option could be to write custom collision detection logic that will override the default one.