0
votes

I have this kind of graphics : https://www.highcharts.com/demo/column-stacked-percent

My problem is that, like in the example, the tooltip lies on the top of each bar. Using the positioner property of the tooltip gives me the possibility of placing it somewhere, however the point.plotY property is always 0. I think that this comes from the fact that tooltip is shared.

I need to place the tooltip on bottom when i'm hovering the top series, because I have some information between bars hidden by the tooltip. How can I get this point.plotY "real" value or overcome the problem ?

1

1 Answers

1
votes

When you have a stacked column, you can get the hover points via this.chart.hoverPoints (this is the tooltip) and choose the point from the stacked column.

If want a specific point which is not part of the hovered column - you can access series object and its via this.chart.series[seriesIndex].data[pointIndex].

Positioner for the tooltip which appears in the bottom point:

   positioner: function (w, h, p) {
      const chart = this.chart
      const points = chart.hoverPoints
      if (points && points.length) {
        const i = points.length - 1
        return { x: points[i].plotX + chart.plotLeft - w / 2, y: points[i].plotY + chart.plotTop}
      }

      return { x: 0, y: -9e7 }
    }

example: http://jsfiddle.net/8acems26/