Module connection problem

[magistr4815]

Hey. I use npm and vue-js. I connected your plugin like this:

import Vue from 'vue';
import HighchartsVue from 'highcharts-vue';
import Highcharts from 'highcharts/highcharts';
import HighchartTooltipDelay from 'highcharts-tooltip-delay';

HighchartTooltipDelay(Highcharts);

Vue.use(HighchartsVue, { highcharts: Highcharts });

// init vue ...

But I get the error: IMG HERE

tooltip-delay.dist.js:47 Uncaught ReferenceError: Highcharts is not defined
    at Object.../node_modules/highcharts-tooltip-delay/tooltip-delay.dist.js ...

Living example here

Connecting other plugins in the same way works fine!
What am I doing wrong? Thanks in advance!

[magistr4815]

highchartsTooltipDelay.js

// https://github.com/rudovjan/highcharts-tooltip-delay
// Переделал под нормальный highcharts plugin

export default function (H) {
  const timerId = {};

  const generatePointsUniqueKey = (points) => {
    const generatePointKey = (point) => {
      return point.category + ' ' + point.series.name + ': ' + point.x + ' ' + point.y;
    };

    const result = points.map(generatePointKey).join(', ');

    return result;
  };

  H.wrap(H.Tooltip.prototype, 'refresh', function (proceed) {
    let seriesName;

    if (Array.isArray(arguments[1])) {
      // Can be array in case that, it's shared tooltip
      seriesName = generatePointsUniqueKey(arguments[1]);
    } else {
      seriesName = arguments[1].series.name;
    }

    const delayForDisplay = this.chart.options.tooltip.delayForDisplay ? this.chart.options.tooltip.delayForDisplay : 1000;

    if (timerId[seriesName]) {
      clearTimeout(timerId[seriesName]);
      delete timerId[seriesName];
    }

    timerId[seriesName] = window.setTimeout(function () {
      const pointOrPoints = this.refreshArguments[0];

      if (pointOrPoints === this.chart.hoverPoint || $.inArray(this.chart.hoverPoint, pointOrPoints) > -1) {
        proceed.apply(this.tooltip, this.refreshArguments);
      }
    }.bind({
      refreshArguments: Array.prototype.slice.call(arguments, 1),
      chart: this.chart,
      tooltip: this,
    }), delayForDisplay);
  });
}

index.js

import Highcharts from 'highcharts/highcharts';
import HighchartsTooltipDelay from './highchartsTooltipDelay';

HighchartsTooltipDelay(Highcharts);

I fixed it like that. I got the code from the function that was being executed and put it in a separate file! It is necessary that the author of the repository corrects this and makes a normal plug-in for the chart.

But there is a problem, you have to be connected JQuery - "$.inArray".

[rudovjan]

Hi @magistr4815 sorry for very late answer. Will take a look.

[rudovjan]

It looks like a lot changed in world of Highcharts

[rudovjan]

Please take a look on new version, it should help.