Hi,
Trying to add annotations to the heatmap chart and it is not visible. I can see the text (point). Please advise. Screenshot provided.
Thanks,
Lisa
Code: Select all
<div id="container" style="min-width: 500px; max-width: 1000px; height: 700px; margin: 0 auto;"></div>
$('#container').highcharts(
{
chart:
{
type: 'heatmap', marginTop: 50, marginBottom: 50, backgroundColor: '#FFFFFF', plotBackgroundColor:
{
linearGradient: {x1: 1, y1: 0, x2: 0, y2: 1},
stops: [
[0.10, 'rgb(240, 59, 9)'],
[0.40, 'rgb(255, 224, 80)'],
[0.60, 'rgb(245, 202, 2)'],
[0.85, 'rgb(4, 148, 25)'],
[1, 'rgb(13, 163, 35)']
]
}
},
xAxis: {
categories: [0,1,2,3,4,5] , lineWidth: 0, min: 0, max: 5, title: {text: 'Inherent Risk', style: {fontWeight: 'bold'}},
labels:
{
formatter: function()
{
if(this.value == 5 ) return 'High';
else if(this.value == 3 ) return 'Medium';
else if(this.value == 1 ) return 'Low';
}
}
},
yAxis:
{reversed: true,
categories: [5,4,3,2,1,0], lineWidth: 0, min: 0, max: 5 , title: { text: 'Control Environment', style: { fontWeight: 'bold' }},
labels:
{
formatter: function()
{
if(this.value == 5 ) return 'Weak';
else if(this.value == 3 ) return 'Elevated Attention';
else if(this.value == 1 ) return 'Strong';
}
}
},
colorAxis: { min: 0, max: 5, minColor: 'transparent', maxColor: 'transparent' },
tooltip:
{enabled: false
},
plotOptions: { scatter: {
dataLabels: {
enabled: true,
useHTML: true,
style: {
color: 'blue',
textOutline: 'none',
fontWeight: 'bold',
fontSize: 11,
cursor: 'pointer'
},
},
allowPointSelect: true, marker: { fillColor: 'blue' , lineColor: 'black', fillOpacity:0.7}
}
},
legend: {enabled: false, align: 'right', layout: 'vertical', verticalAlign: 'middle'},
credits: { enabled: false},
series: [
{
type: 'heatmap', borderWidth: 1,
data: [
[0, 0, 0], [0, 1, 1], [0, 2, 2], [0, 3, 3], [0, 4, 4], [0, 5, 5],
[1, 0, 0], [1, 1, 1], [1, 2, 2], [1, 3, 3], [1, 4, 4], [1, 5, 5],
[2, 0, 0], [2, 1, 1], [2, 2, 2], [2, 3, 3], [2, 4, 4], [2, 5, 5],
[3, 0, 0], [3, 1, 1], [3, 2, 2], [3, 3, 3], [3, 4, 4], [3, 5, 5],
[4, 0, 0], [4, 1, 1], [4, 2, 2], [4, 3, 3], [4, 4, 4], [4, 5, 5],
[5, 0, 0], [5, 1, 1], [5, 2, 2], [5, 3, 3], [5, 4, 4], [5, 5, 5]
],
dashStyle: 'Dot'
},
{
name: 'Scatter', type: 'scatter',
data: [[3,1.5,1,0056],
[3, 3.02, 2, 1338],
[3, 3.06, 3, 1176],
[0, 0, 4, 1221],
[0, 0, 5, 1517]]
}],
annotations: [{
useHTML:true, visible: true,
labels: [{
point: this.point,
text: 'call',
shape: 'callout'
}],
labelOptions: {
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA'
}
}]
});