Is there a way to get the mouse coordinates with respect to page on mouseOver of a point in Highcharts?

user_1487709 0
Viewed 505

I am trying to have a highchart spline chart with tooltip positioned to the right corner and have another tooltip on mouseover specific points. So basically I would like to show Two tooltips for some points. So far i was able to do that only on click event where we the event information with mouse coordinates with respect to page. Is there a way we can show two tooltips for same point? I want one tooltip to be positioned at the right corner and the other one next to the point as shown in the below JSfiifle.

"point": {
          "events": {
            "mouseOver": function(e) {
              var selectedPoints = $('#' + this.series.chart.renderTo.id).highcharts().getSelectedPoints();
              if (selectedPoints.length) {
                selectedPoints[0].select();
              }
              if (e.target.marker && !e.target.marker.radius) {
                return;
              }
            },
            "mouseOut": function(e) {
              util.hideBandInsightsPopup();
            },
            "click": function(e) {
              if (e.point && e.point.marker && !e.point.marker.radius) {
                return;
              }

              $("#factor-popup-content").html("my popup content");

              var yPixel = e.pageY + 5;
              var currentPointHeight = yPixel + $("#factor-popup").height();
              if ($("#factor-popup").height() < 300 && currentPointHeight > $(window).height()) {
                var adjustHeight = currentPointHeight - $(window).height() + 30;
                yPixel = yPixel - adjustHeight;
              }
              $("#factor-popup").css({
                'position': 'fixed',
                'top': (yPixel) + 'px',
                'left': (e.pageX) + 5 + 'px'
              }).show();
            }
          }
        }

Here is the Jsfiddle http://jsfiddle.net/zLpakfj2/4/

angular2-highcharts highcharts jquery javascript
1 Answers

The original event is not passed to the mouseOver event, but you can add it for example to a point in this way: 

(function(H) {
  H.wrap(
    H.Pointer.prototype,
    'getHoverData',
    function(
      proceed,
      existingHoverPoint,
      existingHoverSeries,
      series, isDirectTouch,
      shared,
      e
    ) {

      var result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));

      if (result.hoverPoint) {
        result.hoverPoint.originalEvent = e;
      }

      return result;
    });
}(Highcharts));

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

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

user_89513770
Related