Adding a custom tooltip to a bubble chart / highchart

elizabeth_shell picture elizabeth_shell · Apr 17, 2013 · Viewed 7.7k times · Source

I am trying to customize the tooltip in a highcharts bubble chart. Rather than having just the figures appear in the tooltip, I'd like to add context based on the x,y and z titles (ex, "50 fatalities, 100 injured, 150 total victims" instead of the current "(50,150) Size: 150" display). I'm able to make this happen in scatter plot charts using the following, but no dice in bubbles. Any ideas? Thanks. :)

tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat: '{point.x} fatalities, {point.y} injured, {point.z}  total'
                }

Answer

Mahesh Sapkal picture Mahesh Sapkal · Apr 17, 2013

Hope I understand your question correctly, is this what you are looking for.

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'bubble',
            zoomType: 'xy'
        },
        plotOptions: {
            bubble: {
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat: '{point.x} fatalities, {point.y} injured, {point.z}  total'

                }
            }
        },
        title: {
            text: 'Highcharts Bubbles'
        },

        series: [{
            data: [
                [97, 36, 79],
                [94, 74, 60],
                [68, 76, 58],
                [64, 87, 56],
                [68, 27, 73],
                [74, 99, 42],
                [7, 93, 87],
                [51, 69, 40],
                [38, 23, 33],
                [57, 86, 31]
            ]
        }, {
            data: [
                [25, 10, 87],
                [2, 75, 59],
                [11, 54, 8],
                [86, 55, 93],
                [5, 3, 58],
                [90, 63, 44],
                [91, 33, 17],
                [97, 3, 56],
                [15, 67, 48],
                [54, 25, 81]
            ]
        }, {
            data: [
                [47, 47, 21],
                [20, 12, 4],
                [6, 76, 91],
                [38, 30, 60],
                [57, 98, 64],
                [61, 17, 80],
                [83, 60, 13],
                [67, 78, 75],
                [64, 12, 10],
                [30, 77, 82]
            ]
        }]

    });

});

DEMO