Search code examples
highchartshoversalesforcevisualforcebubble-chart

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


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


Solution

  • 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