highcharts- chart

Question

Could someone guide me on how to get the no of bubbles in highcharts

Answer 1

You can use pointFormatter to calculate the content of the tooltip dynamically. In the callback you can check if the hovered bubble overlaps with other bubbles.

function areOverlapping(bubble1, bubble2) {
  const {translateX: tx, translateY: ty } = bubble1.series.group

  const x1 = tx + bubble1.plotX
  const y1 = ty + bubble1.plotY
  const r1 = bubble1.marker.radius

  const x2 = tx + bubble2.plotX
  const y2 = ty + bubble2.plotY
  const r2 = bubble2.marker.radius

  const x = x1 - x2
  const y = y1 - y2
  const r = r1 + r2

  return x * x + y * y <= r * r
}

Tooltip.pointFormatter:

series: [{
  tooltip: {
    pointFormatter: function () {
      const overlapCount = this.series.data.reduce((sum, point) => {
        return sum + (point !== this && areOverlapping(this, point))
      }, 0)

      return 'Overlapping bubbles: ' + overlapCount
    }
  },

example: https://jsfiddle.net/0yzkfdjr/