Can I change the data displayed on hovering over a bubble chart in highcharts?

62 Views Asked by At

Can I hover over the bubbles in a bubble chart and display different data instead of the data points (x and y axis data)?

Picture of current bubble chart

Rep names in a single line

Rep names list

1

There are 1 best solutions below

3
Michał On BEST ANSWER

Yes, you can do this with tooltip.pointFormat or tooltip.pointFormatter() if you want to display some other information conditionally. For points of a given series, you can enter not only basic information such as x, y, z, name, and some default ones but also custom ones:

tooltip: {
  //pointFormat: '<div>{point.custom}</div>',
  pointFormatter: function() {
    const point = this;
    return point.custom ? point.custom : 'z: '+point.z;
  }
},
series: [{
  data: [{
    x: 2,
    y: 4,
    z: 8,
    custom: 'Custom tooltip info'
    }]
}]

Demo: https://jsfiddle.net/BlackLabel/vdf9rnu6/
API: https://api.highcharts.com/highcharts/tooltip.pointFormat
https://api.highcharts.com/highcharts/tooltip.pointFormatter
https://api.highcharts.com/highcharts/series.bubble.data