HeatMap Gradient with Scatter - Want to add annotation

[eyambao]

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

[jakub.j]

Welcome to our forum and thanks for contacting us with your question!

Could you reproduce the issue in an online editor that I could work on?
It is hard to tell you what could be done without taking a look at your code.

You can base on this demo: https://jsfiddle.net/BlackLabel/fd1re03k/

Best regards
Jakub

[eyambao]

Thank you for responding.

I want to be able to add annotations dynamically based on the data.

Here's my code:

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'
             }
            }]
                
        });

[eyambao]

Need support on how to assign annotations dynamically based on the number of data received from the source. I just hardcoded the data for now.

[eyambao]

And also, how to show only alternating gridlines just like the one on the screenshot?

[jakub.j]

Hey!

Thanks for the demo!

If you want to use annotations to create the labels I prepared a demo for you, where I parse your data and place the annotation on each point based on the id I added when parsing data.
Demo: https://jsfiddle.net/BlackLabel/q2mevz14/

Another solution would be to use deafult scatter's dataLabels, which can also be shaped as a callout using dataLabels.shape.
I prepared another demo, showing how we can achieve similar behavior, with less effort.
Demo: https://jsfiddle.net/BlackLabel/jbdmeu8y/

On both demos I rendered custom gridLines using Highcharts.SVGRenderer, as the ones we saw previously were just the borders of the cells in heatmap.

Let me know if that was what you were looking for!
Best regards
Jakub

[eyambao]

Hello Jakub, Thank you so much for the codes. This is exactly what 'm looking for.
However, how can I take care of the overlaps? I can only see 3 annotations because #2 and #3 have the same x axis as well as #4 and # 5 too?
data: [[3,1.5,1,0056],
[3, 3.02, 2, 1338],
[3, 3.06, 3, 1176],
[0, 0, 4, 1221],
[0, 0, 5, 1517]]

[jakub.j]

Hey!

You need to position those dataLabels based on whatever value you want, for now, when parsing the data I position them based on their index (I change their verticalAlign and x values), but you probably need to calculate it differently based on the data.

Demo: https://jsfiddle.net/BlackLabel/bfj3erp5/

I hope you will find it useful
Kind regards
Jakub

[eyambao]

Thank you so much Jakub