How to allow the country labels to auto-hide when using HTML?

Question

I have this map example here that I am running through Highmaps from Highcharts.

You can observe that when we have this setting below, countries like Romania, Bulgaria, Serbia are not showing their label because the country is too small for that zoom level. If you zoom-in enough, those small countries will become bigger and their label is displayed.

dataLabels: {               
    enabled: true,
    useHTML: false,
    format: '{point.name}'
}

If I change to useHTML: true, all country labels will show all the time, no matter what the zoom level is or how small the country is which causes the labels to overlap really bad like this.

Because of the project requirements, sticking with useHTML: true is a must, but is there anyway to achieve the auto-hiding of the labels in this situation?

Answer 1

You could try to use formatter instead of format and show only labels that should be visible. labelrank of point might be helpful. A bit random example (but you will get the idea): http://jsfiddle.net/Lu3ec0Lv/2/

Changed part:

formatter: function () {
                        var ret = null,
                            chart = this.series.chart,
                            xExt = chart.xAxis[0].getExtremes();
                        if ((this.point.labelrank%2 + (xExt.max - xExt.min))%2) ret = this.point.name;
                        return ret;
                    }