javascript - Highcharts - multiple yAxis each with its own tooltip

Question

Is this possible?

I already played with tooltip.shared and tooltip.crosshairs but I couldn't manage to get something similar.

EDIT: Something like Wunderground's weather forecast graph would be perfect (try to "mouseover" the graph)

Answer 1

Using tooltip.positioner in synchronous highcharts can results to required behaviour.

tooltip: {
      positioner: function(labelWidth, labelHeight, point) {
        var tooltipX, tooltipY;
        tooltipX = point.plotX + this.chart.plotLeft + 20;
        tooltipY = point.plotY + this.chart.plotTop - 20;
        return {
          x: tooltipX,
          y: tooltipY
        };
      }
    }

Fiddle demo modifying synchronized-charts demo

Update Fix for tooltip hiding at extreme right

tooltip: {
      positioner: function(labelWidth, labelHeight, point) {
        var tooltipX, tooltipY;
        if (point.plotX > 340) {
          tooltipX = point.plotX + this.chart.plotLeft - 150;
        } else {
          tooltipX = point.plotX + this.chart.plotLeft + 20;
        }
        tooltipY = point.plotY + this.chart.plotTop - 20;
        console.log(tooltipX);
        return {
          x: tooltipX,
          y: tooltipY
        };
      }
    }

Fixed Fiddle