Clever Geek Handbook

Highcharts - multiple yAxis with their own tooltip

Is it possible?

crosshairs multiple yAxis lines multiple tooltips

I have played with tooltip.shared

and tooltip.crosshairs

before, but I was unable to get something like this.

EDIT: Something like Underground Weather Prediction Graph would be perfect (try "hover over" the graph)

+3


source to share


1 answer


Using tooltip.positioner in synchronous high speed charts can result in the desired behavior.

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 modification synchronized-charts demo



Update Fix for tooltip hiding at far 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

+3


source






More articles:


All Articles