enh/3957-legend-item-click-event

samples/highcharts/legend/pie-legend-itemclick/demo.html

@@ -0,0 +1,5 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+<script src="https://code.highcharts.com/modules/accessibility.js"></script>
+
+<div id="container"></div>

samples/highcharts/legend/pie-legend-itemclick/demo.js

@@ -0,0 +1,34 @@
+Highcharts.chart('container', {
+    chart: {
+        type: 'pie'
+    },
+
+    legend: {
+        events: {
+            itemClick: function () {
+                if (!confirm(
+                    'Do you want to toggle the visibility ' +
+                    'of this slice?'
+                )) {
+                    return false;
+                }
+            }
+        }
+    },
+
+    plotOptions: {
+        pie: {
+            showInLegend: true
+        }
+    },
+
+    series: [{
+        data: [
+            ['Firefox', 44.2],
+            ['IE7', 26.6],
+            ['IE6', 20],
+            ['Chrome', 3.1],
+            ['Other', 5.4]
+        ]
+    }]
+});

samples/highcharts/plotoptions/pie-point-events-legenditemclick/demo.css → samples/highcharts/legend/series-legend-itemclick/demo.css

@@ -1,4 +1,3 @@
 #container {
     height: 400px;
-    width: 500;
 }

samples/highcharts/legend/series-legend-itemclick/demo.html

@@ -0,0 +1,5 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+<script src="https://code.highcharts.com/modules/accessibility.js"></script>
+
+<div id="container"></div>

samples/highcharts/legend/series-legend-itemclick/demo.js

@@ -0,0 +1,30 @@
+Highcharts.chart('container', {
+    xAxis: {
+        categories: [
+            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
+            'Oct', 'Nov', 'Dec'
+        ]
+    },
+
+    legend: {
+        events: {
+            itemClick: function () {
+                const visibility = this.visible ? 'visible' : 'hidden';
+                if (!confirm(
+                    'The series is currently ' +
+                             visibility + '. Do you want to change ' +
+                                 'that?'
+                )) {
+                    return false;
+                }
+            }
+        }
+    },
+
+    series: [{
+        data: [
+            29.9, 71.5, 106.4, 129.2, 144.0, 176.0,
+            135.6, 148.5, 216.4, 194.1, 95.6, 54.4
+        ]
+    }]
+});

samples/unit-tests/bubble-legend/layout/demo.js

@@ -1,26 +1,24 @@
 QUnit.test('Bubble legend ranges', function (assert) {
-    var bubbleLegendItem,
-        seriesItem,
-        chart = Highcharts.chart('container', {
-            legend: {
-                align: 'right',
-                layout: 'vertical',
-                bubbleLegend: {
-                    enabled: true,
-                    legendIndex: 0
-                }
-            },
-
-            series: [
-                {
-                    type: 'bubble',
-                    data: [
-                        [1, 1, 1],
-                        [2, 2, 2]
-                    ]
-                }
-            ]
-        });
+    const chart = Highcharts.chart('container', {
+        legend: {
+            align: 'right',
+            layout: 'vertical',
+            bubbleLegend: {
+                enabled: true,
+                legendIndex: 0
+            }
+        },
+
+        series: [
+            {
+                type: 'bubble',
+                data: [
+                    [1, 1, 1],
+                    [2, 2, 2]
+                ]
+            }
+        ]
+    });
 
     // Check if there is only one bubble-legend
     assert.strictEqual(
@@ -41,8 +39,8 @@ QUnit.test('Bubble legend ranges', function (assert) {
         'Bubble legend was properly positioned'
     );
 
-    bubbleLegendItem = chart.legend.bubbleLegend.legendItem.group;
-    seriesItem = chart.legend.allItems[0].legendItem.group;
+    const bubbleLegendItem = chart.legend.bubbleLegend.legendItem.group,
+        seriesItem = chart.legend.allItems[0].legendItem.group;
 
     assert.strictEqual(
         bubbleLegendItem.translateY > seriesItem.translateY &&
@@ -86,17 +84,19 @@ QUnit.test('Bubble legend ranges', function (assert) {
         data: [
             [1, 4, 4],
             [2, 5, 5]
-        ],
-        events: {
-            legendItemClick(e) {
-                e.preventDefault();
-            }
-        }
+        ]
     }, false);
 
     chart.legend.update({
         enabled: true,
-        floating: false
+        floating: false,
+        events: {
+            itemClick(e) {
+                if (e.legendItem.index === 1) {
+                    e.preventDefault();
+                }
+            }
+        }
     });
 
     chart.series[1].legendItem.group.element.dispatchEvent(new Event('click'));

samples/unit-tests/legend/events/demo.js

@@ -1,40 +1,34 @@
 QUnit.test(
-    'Legend symbol events when useHTML: true (#6553)',
-    function (assert) {
-        var chart = Highcharts.chart('container', {
+    'Legend events', function (assert) {
+        let legendItemClickFlag = false;
+        const chart = Highcharts.chart('container', {
                 chart: {
                     type: 'area'
                 },
                 legend: {
                     useHTML: true
                 },
-                series: [
-                    {
-                        name: 'Installation 1',
-                        data: [1]
-                    },
-                    {
-                        name: 'Installation 2',
-                        data: [2]
-                    },
-                    {
-                        name: 'Installation 3',
-                        data: [3]
-                    }
-                ]
+                series: [{
+                    name: 'Installation 1',
+                    data: [1]
+                }, {
+                    name: 'Installation 2',
+                    data: [2]
+                }, {
+                    name: 'Installation 3',
+                    data: [3]
+                }]
             }),
             test = TestController(chart),
             series = chart.series[0],
             legendGroup = chart.legend.group,
             bbox = series.legendItem.symbol.getBBox(true),
             seriesLegendGroup = series.legendItem.group,
-            x =
-                seriesLegendGroup.translateX +
+            x = seriesLegendGroup.translateX +
                 legendGroup.translateX +
                 bbox.x +
                 bbox.width / 2,
-            y =
-                seriesLegendGroup.translateY +
+            y = seriesLegendGroup.translateY +
                 legendGroup.translateY +
                 bbox.y +
                 bbox.height / 2;
@@ -44,7 +38,29 @@ QUnit.test(
         assert.strictEqual(
             chart.series[0].visible,
             false,
-            'Hide series on legend item symbol click when useHTML: true'
+            `Hide series on legend item symbol click when useHTML: true
+            (#6553).`
+        );
+
+        chart.legend.update({
+            events: {
+                itemClick: function () {
+                    legendItemClickFlag = true;
+                }
+            }
+        });
+
+        assert.notEqual(
+            chart.legend.options.events.itemClick,
+            void 0,
+            'Legend event item click should be created after update.'
+        );
+
+        test.click(x, y);
+
+        assert.ok(
+            legendItemClickFlag,
+            'Legend item click configures in legend.events should fire.'
         );
     }
 );

ts/Core/Axis/Color/ColorAxisDefaults.ts

@@ -463,6 +463,10 @@ const colorAxisDefaults: DeepPartial<ColorAxis.Options> = {
      * Fires when the legend item belonging to the colorAxis is clicked.
      * One parameter, `event`, is passed to the function.
      *
+     * **Note:** This option is deprecated in favor of
+     * [legend.events.itemClick](#legend.events.itemClick).
+     *
+     * @deprecated
      * @type      {Function}
      * @product   highcharts highstock highmaps
      * @apioption colorAxis.events.legendItemClick

ts/Core/Defaults.ts

@@ -1057,6 +1057,34 @@ const defaultOptions: DefaultOptions = {
          */
         className: 'highcharts-no-tooltip',
 
+        /**
+         * General event handlers for the legend. These event hooks can
+         * also be attached to the series at run time using the
+         * `Highcharts.addEvent` function.
+         *
+         * @declare Highcharts.LegendEventsOptionsObject
+         *
+         * @private
+         */
+        events: {},
+
+        /**
+         * Fires when the legend item belonging to the series is clicked. One
+         * parameter, `event`, is passed to the function. The default action
+         * is to toggle the visibility of the series, point or data class. This
+         * can be prevented by returning `false` or calling
+         * `event.preventDefault()`.
+         *
+         * @sample {highcharts} highcharts/legend/series-legend-itemclick/
+         *         Confirm hiding and showing
+         * @sample {highcharts} highcharts/legend/pie-legend-itemclick/
+         *         Confirm toggle visibility of pie slices
+         *
+         * @type      {Highcharts.LegendItemClickCallbackFunction}
+         * @context   Highcharts.Legend
+         * @apioption legend.events.itemClick
+         */
+
         /**
          * When the legend is floating, the plot area ignores it and is allowed
          * to be placed below it.