Clever Geek Handbook

Highcharts show / hide datalabel of the selected point

There are still big problems working with datalabels. Now I need to show and hide datalabels by clicking on the points. Tried this:

plotOptions: {
            series: {
                allowPointSelect : true,
                point: {
                    events: {
                        select /*click*/: function () {
                            this.options.dataLabels.enabled = !this.options.dataLabels.enabled;
                            this.update();
                        }
                    }
                }                
            }
        }

But we get Uncaught TypeError: Cannot set property 'enabled' of undefined

.

There are event points point.select

and at the PlotOptions level point.click

, but from the examples given at highcharts.com. I cannot get any help.

Also I can't figure out if I should be working with a dot or maybe a specific series via array access like series[0].data[1]

, etc.? Thank.

0


source to share


1 answer


Pass the updated property to the method Point.update()

.

          point:{
                events:{
                    click: function(){
                        // determine toggle state
                        // on first click this.dataLabels is undefined...
                        var e = !this.dataLabels || this.dataLabels.enabled ? false : true;
                        this.update({
                            dataLabels:{
                                enabled: e
                            }
                        });
                    }
                }
            }


Here's an example that switches them.

+4


source






More articles:


All Articles