Shared events highcharts

Question

I am using the HighCharts Custom Events Module (but even without using it my question remains the same) and I'm binding the same events/functions to each of my elements (series, yAxis, etc...) and it is getting repetitive :

...
yAxis: [
{
    labels: {
        format: "{value}°C"
    },
    title: {
        text: "Temperature",        
        events: {
            click: function (event) {
                foo(event);
            },
            dblclick: function (event) {
                foo(event);
            },
            contextmenu: function (event) {
                foo(event);
            }
        }
    },
    id: "temperature",
    labels: {
        events: {
            click: function (event) {
                bar(event);
            },
            dblclick: function (event) { 
                bar(event);
            },
            contextmenu: function (event) {
                bar(event);
            }
        }
    }
},
    {
    labels: {
        format: "{value}km"
    },
    title: {
        text: "Width",      
        events: {
            click: function (event) {
                foo(event);
            },
            dblclick: function (event) {
                foo(event);
            },
            contextmenu: function (event) {
                foo(event);
            }
        }
    },
    id: "temperature",
    labels: {
        events: {
            click: function (event) {
                bar(event);
            },
            dblclick: function (event) { 
                bar(event);
            },
            contextmenu: function (event) {
                bar(event);
            }
        }
    }
}
...
],

And I even allow the use to add more (again, yAxis, series, etc... "after render").

That's why I'd like to know if there is a more "global way" to bind events to each yAxis, series, ... of a given chart. Something similar to

Highcharts.setOptions({ // Apply to all charts
    series: {    //hypothetically
        events: {
            click: function (event) {
                foo(event)
            }
        }
    }
});

I also thought about creating some kind of updating callback after a series is rendered, something like

    Highcharts.setOptions({ // Apply to all charts
        events: {
            addSeries: function (event) {
                event.update(
                    {events{
                        click: function(event){ 
                            foo(event); 
                        }
                    }
                }, false);
            }
        }
    });

But that's more of a hack than anything

This question isn't really important, it's more out of curiosity but, at the same time, it would make my (terrible) code clearer ^^

Thank you for reading.

Answer 1

Options that will be applied for all series can be specified in plotOptions.series property. Use Highcharts.setOptions function to change default options of every chart:

var foo = function() {
  console.log("contextmenu event");
}

Highcharts.setOptions({
  xAxis: {
    labels: {
      events: {
        contextmenu: foo
      }
    }
  },   
  plotOptions: {
    series: {
      events: {
        contextmenu: foo
      },
      dataLabels: {
        enabled: true,
        events: {
          contextmenu: foo
        }
      }
    }
  }
});

var chart = Highcharts.chart('container', {

  chart: {
    type: 'column'
  },

  xAxis: [{
    labels: {
      style: {
        color: '#bada55'
      }
    }
  }, {}],

  series: [{
    data: [1, 2]
  }, {
    data: [3, -4],
    xAxis: 1
  }]
});

Live demo: http://jsfiddle.net/BlackLabel/Lxrg3hsy/

API reference: https://api.highcharts.com/class-reference/Highcharts#setOptions