score:3

Accepted answer

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


Related Query

More Query from same tag