Adding a custom tooltip to a bubble chart / highchart

Question

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'
                }

score 7 · Accepted Answer · answered Apr 17 '13 at 03:27

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

https://jsfiddle.net/Kondaldurgam/7kLkh7ya/24/ Can please check once i have x-axis 0-50% but its showing 1% whin i was hovered — Kondal, Apr 04 '17 at 12:04

Sebastian Bochan · Answer 2 · 2013-06-11T13:18:37.683

1

You should use tooltip formatter http://api.highcharts.com/highstock#tooltip.formatter

EDIT: http://jsfiddle.net/7nqB5/

edited Jun 11 '13 at 13:18

answered Apr 17 '13 at 08:19

Sebastian Bochan

37,348
3
49
75

Yeah putting it in the root works, but it changes the tooltip for all other line types in the chart as well.. – Alex Jun 12 '13 at 14:24
You cna recognise by series.index or series.id parameter. – Sebastian Bochan Jun 12 '13 at 15:33
this.series.userOptions would be where the id is. But how would you make it fall back to the default for other series (/seriestypes) then? See my experiment @ http://jsfiddle.net/alexman/7nqB5/1/ – Alex Jun 14 '13 at 09:52
I see, it looks like that checking series works, so could you explain what is needed? – Sebastian Bochan Jun 14 '13 at 11:34
That 'custom' gets the custom tooltip and the other series get the chart-default tooltip (the latter doesn't work) – Alex Jul 18 '13 at 12:57
1

You can recongise if z parameter is added (in bubble chart is required) and then customise tooltip in condition http://jsfiddle.net/sbochan/7nqB5/2/ Default tooltip need to be defined in ELSE of condition. – Sebastian Bochan Jul 18 '13 at 13:05
That's not the default tooltip, it's a custom tooltip that *says* it's default :D Might work for some people though. +1 – Alex Jul 19 '13 at 10:46
I know, but I describe you that you need to put text in ElSE it is only option. – Sebastian Bochan Jul 19 '13 at 12:50

Adding a custom tooltip to a bubble chart / highchart

2 Answers2