How do I attach a click event handler to null data points on HighMaps

Question

I have already tried changing the data (null to some out of range number) and toying with colorAxis min and mas and color stops and while that works if it where a single map, it does not work for what I am doing.

I really need to be able to hang code on a click event.

Thanks

https://jsfiddle.net/alex_at_pew/nbz9npyg/5/

$(function () {
    // Instantiate the map
    $('#container').highcharts('Map', {
        plotOptions: {
            map: {
                events: {
                    mouseOver: function (e) {
                        console.log(e);
                    }
                }
            }
        },
        chart : {
            borderWidth : 1
        },
        title : {
            text : 'Nordic countries'
        },
        subtitle : {
            text : 'Demo of drawing all areas in the map, only highlighting partial data'
        },
        legend: {
            enabled: false
        },
        colorAxis: {
            dataClasses: [{
                from: -100,
                to: 1,
                color: '#C40401',
                name: 'pseudonull(1s are the new null)'
            }],
        },
        series : [{
            name: 'Country',
            mapData: Highcharts.maps['custom/europe'],
            data: [
                {
                    code: 'DE',
                    value: 1
                }, {
                    code: 'IS',
                    value: 2
                }, {
                    code: 'NO',
                    value: 2
                }, {
                    code: 'SE',
                    value: 2
                }, {
                    code: 'FI',
                    value: 2
                }, {
                    code: 'DK',
                    value: 2
                }
            ],
            joinBy: ['iso-a2', 'code'],
            dataLabels: {
                enabled: true,
                color: 'white',
                formatter: function () {
                    if (this.point.value > 1) {
                        return this.point.name;
                    } else if(this.point.value == 1) {
                        return 'this is "null"';
                    }
                }
            },
            tooltip: {
                headerFormat: '',
                pointFormat: '{point.name}'
            }
        }]
    });
});

Answer 1

I am not very sure about what you try to achieve, but from my understanding, you want to attach click events to countries with NULL values.

I have created this example here: http://jsfiddle.net/on6v5vhr/

Apparently, if a country has a NULL value, it won't be able to have click events, but what I've done is to simulate this behaviour so I went through these steps:

Process your data and give all the null value the same particular value (France was null so I gave it the value of -999)

{code: 'FR', value: -999}

Show datalabels only for the countries that have a value and that values is different than -999

formatter: function() {
    if (this.point.value && (this.point.value !== -999)) {
        return this.point.name;
    }
}

Show tooltip only for the countries that have a value different than -999

tooltip: {
    formatter: function() {
        if (this.point.value !== -999) {
            return this.point.name;
            } else {
                return false;
            }
        }
    }

Manually set the color same as the NULL color for all countries that have the value of -999

colorAxis: {
    dataClasses: [{
        from: -100,
        to: 1,
        color: '#C40401',
        name: 'pseudonull(1s are the new null)'
    }, {
        from: -999,
        to: -999,
        color: 'rgba(0,0,0,0)',
        name: 'No data'
    }],
}