Related
Hello I am working with Twilio Studio and I am using an HTTP Request, which brings me the following information.
[
{
"id": 131316,
"name": "User 1",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": "Monday",
"open": "08:30",
"close": "13:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "14:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "13:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "14:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "13:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "14:00",
"close": "17:00"
}
]
},
{
"id": 131313,
"name": "User 2",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": " Monday",
"open": "08:30",
"close": "14:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "15:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "14:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "15:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "14:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "15:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "14:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "15:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "14:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "15:00",
"close": "17:00"
}
]
},
{
"id": 130975,
"name": "User 3",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": " Monday",
"open": "08:30",
"close": "13:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "14:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "13:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "14:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "13:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "14:00",
"close": "17:00"
}
]
}
]
I want to capture the "name" information that comes from the HTTP response but I have not been able to do it. I have used the following options without it working for me.
{{widgets.ListaPrestadores.response.parsed.name}}
{{widgets.ListaPrestadores.response.parsed.name[0]}}
{{widgets.ListaPrestadores.response.body.parsed.name}}
{{widgets.ListaPrestadores.response.body.parsed.name[0]}}
Does anyone have an idea how I could do this? Thank you.
Try wrapping the array in an object like below, then access first element in the array with the syntax.
Note that, although an array is valid JSON, if your request returns an array of objects, it will not be parsed by your Studio Flow
{{widgets.http_1.parsed.data[0].name}}
{"data":
[
{
"id": 131316,
"name": "User 1",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": "Monday",
"open": "08:30",
"close": "13:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "14:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "13:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "14:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "13:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "14:00",
"close": "17:00"
}
]
},
{
"id": 131313,
"name": "User 2",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": " Monday",
"open": "08:30",
"close": "14:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "15:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "14:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "15:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "14:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "15:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "14:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "15:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "14:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "15:00",
"close": "17:00"
}
]
},
{
"id": 130975,
"name": "User 3",
"location_id": 38716,
"times": [
{
"day": 1,
"day_name": " Monday",
"open": "08:30",
"close": "13:00"
},
{
"day": 1,
"day_name": " Monday",
"open": "14:00",
"close": "18:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 2,
"day_name": "Tuesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "08:30",
"close": "13:00"
},
{
"day": 3,
"day_name": "Wednesday",
"open": "14:00",
"close": "18:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "08:30",
"close": "13:00"
},
{
"day": 4,
"day_name": "Thursday",
"open": "14:00",
"close": "18:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "08:30",
"close": "13:00"
},
{
"day": 5,
"day_name": "Friday",
"open": "14:00",
"close": "17:00"
}
]
}
]
}
Plot bands in highchart export server is not working properly. I want the output same as shown in jsfiddle below.
I want the color plot band to show on y axis with width 20.
This is expected output: https://jsfiddle.net/vc6r8y3n/
Attached image is actual output when we use high-chart export server.
but when I tried same JavaScript json object on
http://export.highcharts.com/
its giving me image with plot band color spread on whole chart. its not considering width for 'y' or 'x' axis in export server. I gave attached image of export chart.
Why highchart behaving differently in both the cases.
Highchart JSON is same as in JSfiddle.
Actual image.
Expected is what it display in Jsfiddle. https://jsfiddle.net/vc6r8y3n/
{
"chart": {
"height": 350,
"width": 600,
"style": {
"fontFamily": "\"Arial\", sans-serif",
"fontSize": "16px"
},
"backgroundColor": "transparent"
},
"title": {
"text": null
},
"credits": {
"enabled": false
},
"legend": {
"align": "center",
"layout": "horizontal",
"verticalAlign": "bottom",
"symbolHeight": 5,
"symbolWidth": 5,
"symbolRadius": 0,
"itemDistance": 10,
"itemStyle": {
"fontSize": "5px",
"fontWeight": "bold",
"fontFamily": "\"Arial\", sans-serif"
},
"borderWidth": 0,
"padding": 0,
"margin": 5
},
"xAxis": {
"categories": [
"Sep-2020",
"Oct-2020",
"Nov-2020",
"Dec-2020",
"Jan-2021",
"Feb-2021"
],
"labels": {
"style": {
"fontSize": "4px",
"fontFamily": "\"Arial\", sans-serif",
"color": "#000"
},
"y": 5
},
"gridLineColor": "transparent",
"gridLineWidth": 0,
"minorGridLineWidth": 0,
"lineColor": "#9A9A9A",
"zIndex": 9999999
},
"yAxis": [
{
"title": {
"text": ""
},
"min": 0,
"max": 100,
"tickInterval": 20,
"plotBands": [
{
"color": "rgb(204,0,0)",
"from": 0,
"to": 30.99,
"zIndex": 3
},
{
"color": "rgb(226,113,113)",
"from": 31,
"to": 44.99,
"zIndex": 3
},
{
"color": "rgb(247,209,34)",
"from": 45,
"to": 54.99,
"zIndex": 3
},
{
"color": "rgb(136,207,136)",
"from": 55,
"to": 68.99,
"zIndex": 3
},
{
"color": "rgb(68,180,68)",
"from": 69,
"to": 87.99,
"zIndex": 3
},
{
"color": "rgb(0,153,0)",
"from": 88,
"to": 100,
"zIndex": 3
}
],
"width": 20
}
],
"plotOptions": {
"column": {
"dataLabels": {
"enabled": true
}
}
},
"series": [
{
"name": "Line1",
"type": "column",
"data": [
{
"y": 61,
"color": "#5b9bd5"
},
{
"y": 41,
"color": "#5b9bd5"
},
{
"y": 21,
"color": "#5b9bd5"
},
{
"y": 81,
"color": "#5b9bd5"
},
{
"y": 31,
"color": "#5b9bd5"
},
{
"y": 71,
"color": "#5b9bd5"
}
],
"color": "#5b9bd5",
"showInLegend": true
},
{
"name": "Line 2",
"type": "column",
"data": [
null,
null,
null,
null,
null,
1
],
"color": "#00B050"
},
{
"name": "Line 3",
"type": "spline",
"data": [
null,
{
"y": 45
},
{
"y": 38
},
{
"y": 32
},
{
"y": 40
},
{
"y": 48
}
],
"color": "#9A0229"
}
]
}
enter image description here
Here is the source code:
https://jsfiddle.net/24zrbqpL/
Highcharts.chart('container', {
"chart": {
"type": "line",
"polar": true
},
"xAxis": {
"min": 0.5,
"max": 6.5,
"categories": ['Clarify Objectives', 'Propose Initiates', 'Prioritise & Select', 'Track Performance', 'Review Portfolio', 'Adjust Course', ''],
"labels": {
"distance": 25
},
"tickmarkPlacement": "on",
"lineWidth": 0,
"gridLineColor": "#575756",
"title": {
"style": {
"fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif",
"color": "#666666",
"fontSize": "30px",
"fontWeight": "normal",
"fontStyle": "normal"
}
}
},
"yAxis": {
"plotBands": [{
"from": 1,
"to": 2,
"color": "#f8c4c0",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 2,
"to": 3,
"color": "#f39d96",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 3,
"to": 4,
"color": "#ee766d",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 4,
"to": 5,
"color": "#eb584d",
"outerRadius": "105%",
"thickness": "50%"
}],
"reversed": true,
"min": 1,
"max": 5,
"allowDecimals": false,
"tickInterval": 1,
"tickAmount": 6,
"tickLength": 10,
"gridLineInterpolation": "polygon",
"gridLineColor": "",
"lineWidth": 0,
"tickmarkPlacement": "between",
"tickPixelInterval": 100,
"tickPosition": "outside",
"labels": {
"enabled": true,
"style": {
"fontWeight": "bold"
},
//"y": 25
}
},
"title": {
"text": "APM Spiderweb"
},
"series": [{
data: [1, 2, 3, 4, 5, 6]
}, {
}],
"plotOptions": {
"series": {
"animation": true,
"lineWidth": 4,
"marker": {
"radius": 8,
"symbol": "circle"
},
"_colorIndex": 0,
"_symbolIndex": 0
}
},
"credits": {
"enabled": false
},
"colors": [
"#7cb5ec",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
]
});
Setting a whiteSpace to 'nowrap' in the labels.style object is a solution which you are looking for.
"labels": {
"distance": 25,
"style": {
"whiteSpace": 'nowrap'
}
},
Demo: https://jsfiddle.net/BlackLabel/edpcjL3k/
API: https://api.highcharts.com/highcharts/xAxis.labels.style
I have a line chart with a date/time x axis. The points have a name that is converted to local time. However, the tick marks are placed at UTC midnight. How can I get them to be placed at local midnight?
To clarify, my localtime is EDT (-04:00). So, at approximately 20:00, the tick mark is shown.
var chart = Highcharts.chart('container', {
"chart": {
"type": "line",
"height": 300,
"marginLeft": 60,
"marginRight": 0,
"spacingLeft": 0,
"spacingRight": 0,
"style": {
"fontSize": 14
},
"zoomType": "x"
},
"tooltip": {
"pointFormat": "{point.y}",
"style": {
"fontSize": 14
}
},
"exporting": {
"enabled": false
},
"title": {
"text": "",
"style": {
"display": "none"
}
},
"subtitle": {
"text": "",
"style": {
"display": "none"
}
},
"legend": {
"enabled": "false"
},
"xAxis": {
"type": "datetime",
"labels": {
"enabled": true,
"style": {
"fontSize": "12px"
}
},
"title": {
"text": null
},
"minTickInterval": 86400000
},
"plotOptions": {
"line": {
"color": "#33aaee",
"step": "true",
"lineWidth": 1
}
},
"credits": {
"enabled": false
},
"series": [{
"data": [{
"x": 1499935040582,
"y": 600.8919674194846,
"name": "Jul 13, 2017 4:37 AM"
}, {
"x": 1500069665426,
"y": 600.3026594460489,
"name": "Jul 14, 2017 6:01 PM"
}, {
"x": 1500133689471,
"y": 600.7274040373635,
"name": "Jul 15, 2017 11:48 AM"
}, {
"x": 1500197550895,
"y": 600.1197607401385,
"name": "Jul 16, 2017 5:32 AM"
}, {
"x": 1500224766324,
"y": 600.2311428390589,
"name": "Jul 16, 2017 1:06 PM"
}, {
"x": 1500247544551,
"y": 600.5511455212492,
"name": "Jul 16, 2017 7:25 PM"
}, {
"x": 1500282216949,
"y": 600.2677789206001,
"name": "Jul 17, 2017 5:03 AM"
}, {
"x": 1500285249151,
"y": 600.3165520296044,
"name": "Jul 17, 2017 5:54 AM"
}, {
"x": 1500472917987,
"y": 600.6858600814295,
"name": "Jul 19, 2017 10:01 AM"
}, {
"x": 1500479945476,
"y": 600.6974345877289,
"name": "Jul 19, 2017 11:59 AM"
}],
"showInLegend": false,
"allowPointSelect": true
}]
});
Here is a fiddle showing this.
Highcharts fiddle
Change you epoch's to a javascript date [new Date(epoch)] this will have the date/time fields show in local time instead of UTC.
"series": [{
"data": [{
"x": new Date(1499935040582),
"y": 600.8919674194846
}, {
"x": new Date(1500069665426),
"y": 600.3026594460489
}, {
"x": new Date(1500133689471),
"y": 600.7274040373635
}, {
"x": new Date(1500197550895),
"y": 600.1197607401385
}, {
"x": new Date(1500224766324),
"y": 600.2311428390589
}, {
"x": new Date(1500247544551),
"y": 600.5511455212492
}, {
"x": new Date(1500282216949),
"y": 600.2677789206001
}, {
"x": new Date(1500285249151),
"y": 600.3165520296044
}, {
"x": new Date(1500472917987),
"y": 600.6858600814295
}, {
"x": new Date(1500479945476),
"y": 600.6974345877289
}],
This should keeps your chart in scale with your local time zone
Found an answer to my problem. I am using moment.js to format the time data, so I changed it from:
chart.series[0].data.push({ x: moment(grp.Time).format('x'),
y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) });
to:
chart.series[0].data.push({ x: moment(grp.Time).utc(true).format('x'),
y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) });
So basically I added the ".utc(true)" to the moment definition for the x value.
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
}]
});
});
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.