How to show mouse pointer coordinates on mouse move in angular highchart?

Question

I want to show tooltip on mouse hover of every coordinate in angular-highchart, it should show x and y axis value in tooltip or label.

how we can show the tooltip on every coordinate of high chart.

Answer 1

It can be add scatter series and enabled markers, to imitate showing tooltip when axiss are crossing. Additionally, I added wrapp and extend to get a possibility to chart coordinate inside tooltip.formatter callback function.

(function(H) {
  H.Tooltip.prototype.getAnchor = function(points, mouseEvent) {
    var ret,
      chart = this.chart,
      inverted = chart.inverted,
      plotTop = chart.plotTop,
      plotLeft = chart.plotLeft,
      plotX = 0,
      plotY = 0,
      yAxis,
      xAxis;

    points = H.splat(points);

    // Pie uses a special tooltipPos
    ret = points[0].tooltipPos;

    // When tooltip follows mouse, relate the position to the mouse
    if (this.followPointer && mouseEvent) {
      if (mouseEvent.chartX === undefined) {
        mouseEvent = chart.pointer.normalize(mouseEvent);
      }
      ret = [
        mouseEvent.chartX - chart.plotLeft,
        mouseEvent.chartY - plotTop
      ];
    }
    // When shared, use the average position
    if (!ret) {
      H.each(points, function(point) {
        yAxis = point.series.yAxis;
        xAxis = point.series.xAxis;
        plotX += point.plotX + (!inverted && xAxis ? xAxis.left - plotLeft : 0);
        plotY += (point.plotLow ? (point.plotLow + point.plotHigh) / 2 : point.plotY) +
          (!inverted && yAxis ? yAxis.top - plotTop : 0); // #1151
      });

      plotX /= points.length;
      plotY /= points.length;

      ret = [
        inverted ? chart.plotWidth - plotY : plotX,
        this.shared && !inverted && points.length > 1 && mouseEvent ?
        mouseEvent.chartY - plotTop : // place shared tooltip next to the mouse (#424)
        inverted ? chart.plotHeight - plotX : plotY
      ];
    }

    // Add your event to Tooltip instances
    this.event = mouseEvent;

    return H.map(ret, Math.round);
  }
})(Highcharts)

Highcharts.chart('container', {

  title: {
    text: 'Logarithmic axis demo'
  },

  xAxis: {
    tickInterval: 0.1,
    gridLineWidth: 1,
    type: 'logarithmic',
    accessibility: {
      rangeDescription: 'Range: 1 to 10'
    }
  },

  yAxis: [{
    type: 'logarithmic',
    minorTickInterval: 0.1,
    accessibility: {
      rangeDescription: 'Range: 0.1 to 1000'
    }
  }],

  tooltip: {
    followTouchMove: true,
    followPointer: true,
    formatter: function(mouseEvent) {
      let event = mouseEvent.event

      return `chartX:${event.chartX} <br> chartY:${event.chartY}`;
    }
  },
  series: [{
      data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
      pointStart: 1
    },
    {
      type: 'scatter',
      data: [{
        x: 1,
        y: 10
      }, {
        x: 2,
        y: 10
      }, {
        x: 5,
        y: 10
      }, {
        x: 4,
        y: 10
      }, {
        x: 8,
        y: 10
      }],

    }
  ],
  plotOptions: {
    scatter: {
      states: {
        inactive: {
          enabled: false
        }
      },
      marker: {
        enabled: false
      },
      enableMouseTracking: true,
      showInLegend: false
    },
  }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

Demo: https://jsfiddle.net/BlackLabel/t05uqfvm/