Why aren’t those 2 HighCharts codes equivalent? (Or is there a way to modify a call to legendItemClick after the creation of the chart object?)

Question

Does somebody know why those 2 snippets doesn’t work the same way at all?

In the first snippet I declare a function within a JSON:

                    plotOptions : {
                    series : {
                        events: {
                            legendItemClick: function () {
                                var visibility = this.visible ? 'visible' : 'hidden';
                                if (this.visible) {
                                    this.chart.container.style.height = '100px';
                                    this.chart.reflow();
                                }
                                else {
                                    this.chart.container.style.height = '400px';
                                    this.chart.reflow();
                                }
                                //this.chart.collapse();
                            }
                        }
                    }
                },

See the snippet here: first snippet on jsfiddle

N.B.: it works better on chrome if you save the files' content on your hard drive.

If you click on the legend you will see it will collapse the graph (the function is called). In the second snippet I declare the function later on:

                plotOptions : {
                    series : {
                        events: {
                        }
                    }
                },

…

    myChart.options.plotOptions.series.events.legendItemClick = function () {
        var visibility = this.visible ? 'visible' : 'hidden';
        if (this.visible) {
            this.chart.container.style.height = '100px';
            this.chart.reflow();
        }
        else {
            this.chart.container.style.height = '400px';
            this.chart.reflow();
        }
        //this.chart.collapse();
    };

See the snippet here:second snippet on jsfiddle

In that case if you click on the legend the function will NOT been called and the graph won’t collapse.

I guess the answer is somewhere in highcharts.js, but where? I don’t see what to do when looking at the Highcharts.Legend API documentation: https://api.highcharts.com/class-reference/Highcharts.Legend#toc0

Is there a way to modify a call to legendItemClick after the creation of the chart object?

p.s.: by the way, I see exactly the same thing when looking at myChart.options.plotOptions.series.events.legendItemClick in the debugger for the 2 snippets:

I do not think you can just change the config like you do, after chart init, you should probably look into the docs. — Matteo Tassinari, Nov 22 '19 at 16:19
In general, changing the config is definitely possible. If you see the result of the first snippet for example, or this post: https://stackoverflow.com/questions/10604952/how-to-modify-highcharts-legend-item-click-event — Gwenael, Nov 22 '19 at 16:41

score 1 · Accepted Answer · answered Nov 25 '19 at 10:33

1

Notice that the second function doesn't do anything. Default functionality is triggering.
If you want to customize the default functionality you should consider using the Event.preventDefault

answered Nov 25 '19 at 10:33

Sebastian Wędzel

11,417
1
6
16

Hi Sebastian, Indeed originally in the second function the new code wasn't triggered as you mentioned. Thanks to your advice to use [Event.preventDefault](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) , I could overload the click of legendItem. What I would like now is to be able to access an HighChart object to use, for example, the reflow() method. But the following code is working: – Gwenael Nov 26 '19 at 16:13
'document.getElementsByClassName('highcharts-legend-item')[0].addEventListener('click', function (event) { if (this.classList.value.includes('highcharts-legend-item-hidden')) { window.alert('hello hidden'); } else { window.alert('hello visible'); } event.preventDefault(); }, false);' Thank you. – Gwenael Nov 26 '19 at 16:20
Could you reproduce this code on the online editor and sent me a link to it? – Sebastian Wędzel Nov 26 '19 at 16:23

Why aren’t those 2 HighCharts codes equivalent? (Or is there a way to modify a call to legendItemClick after the creation of the chart object?)

1 Answers1