I have created Heat map using Highcharts. Its working fine in Chrome. But cell color disappears when mouseover the chart in Internet Explorer browser.
Below is the javascript code for creating heat map. I have created these properties into options object and then it can be passed as parameter for creating chart to Highcharts.Chart(options).
var options = {
chart: {
renderTo: 'dashletPreview',
type: 'heatmap',
//marginTop: 40,
//marginBottom: 80,
inverted: false
//width: width
},
title: {
text: ''
},
xAxis: {
categories: ['Sundary', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
labels: {
rotation: 0,
style: {
whiteSpace: 'nowrap',
overflow: 'justify'
}
},
title: {
text: localStorage.getItem("XAxis_Title_Text")
}
},
yAxis: {
categories:['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
title: {
text: localStorage.getItem("YAxis_Title_Text")
},
labels: {
format: '{value}'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a'],
[1, '#c4463a']
],
min: minSeriesVal,
max: maxSeriesVal,
startOnTick: false,
endOnTick: false
},
legend: {
title: {
text: Measure
},
align: 'right',
layout: 'vertical',
//margin: 0,
verticalAlign: 'middle',
y: -20,
x: -50,
//symbolHeight: height - 340
},
exporting: {
enabled: false,
scale: 2
},
tooltip: {
formatter: function () {
//if (this.point.value != 0) {
if (formattedValue[0].toString().indexOf('%') > -1)
return '<b>' + this.series.xAxis.categories[this.point.x] + ', ' + this.series.yAxis.categories[this.point.y] + '</b><br>' + Measure + ':<b>' +
this.point.value + formattedValue[0].toString();
else
return '<b>' + this.series.xAxis.categories[this.point.x] + ', ' + this.series.yAxis.categories[this.point.y] + '</b><br>' + Measure + ':<b>' +
formattedValue[0].toString() + Highcharts.numberFormat(this.point.value, 2);
//}
},
borderRadius: 0,
borderWidth: 1,
backgroundColor: ''
},
series: [{
name: '',
borderWidth: 0,
//colsize: 24 * 36e5,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
//data: y,
dataLabels: {
enabled: false,
color: 'black',
style: {
textShadow: 'none',
HcTextStroke: null
}
}
}]
};
var chart = new Highcharts.Chart(options);
Updating the latest version of highcharts library files fixed this issue.
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/stock/modules/heatmap.js">