Ember highcharts shared tooltip

I'm using highcharts plugin, I have about 5 charts on the page. Every chart is a separate component. I'm a new to ember, so I don't know how to make shared tooltip for all charts. I saw examples with jQuery, event on container and one function for all with sync tooltip. I tried to insert those function in component, but it doesn't really work. How it should be done in ember?

This is a mixin:

 export default Ember.Mixin.create({
 syncExtremes: function (e) {
    let thisChart = this.chart;
    if (e.trigger !== 'syncExtremes') {
      Highcharts.each(Highcharts.charts, function (chart) {
        if (chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) { // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
          }
        }
      });
    }
  },
  sharedRooltips: function () {
    Ember.$('#container').bind('mousemove touchmove touchstart', function (e) {

      let chart, point, i, event;

      for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
        point = chart.series[0].searchPoint(event, true); // Get the hovered point

        if (point) {
          point.highlight(e);
        }
      }
    });

    Highcharts.Pointer.prototype.reset = function () {
      return undefined;
    };

    Highcharts.Point.prototype.highlight = function (event) {
      this.onMouseOver(); // Show the hover marker
      this.series.chart.tooltip.refresh(this); // Show the tooltip
      this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
    };
  },

In component:

    ....
    this.sharedRooltips();
        _syncExtremes= this.syncExtremes;
     ....
     xAxis: {
            type: 'datetime',
            crosshair: true,
            events: {
              syncExtremes: _syncExtremes
            }
          },
    ....