Search code examples
highchartsbubble-chart

Point title in bubble chart (Highcharts)


I have the following code:

var chart = new Highcharts.Chart({
    chart: {
        type: 'bubble',
        zoomType: 'xy',
        renderTo: 'municipalgraph'
    },
    title: {
        text: ''
    },
    yAxis: {
        title: {
            text: ''
        }},

    tooltip: {
        formatter: function() {
            return this.point.name + '<br/><b>' + this.x + '</b><br/><b>' + this.y + '</b>'
        }},
    series: [{
        data: [67,78,75],[64,12,10],[30,77,82]]
    }]
});

I would like to add a name to each point to display it in the tooltip. Is it possible?


Solution

  • You need to replace array of point with object, like:

    series: [{
            data: [{
                x: 67,
                y: 78,
                z: 20,
                customParam: 'custom text1'
            },{
                x: 14,
                y: 68,
                z: 50,
                customParam: 'custom text2'
            },[20,20,20]]
        }]
    

    And in the tooltip get parameter form point.options

    tooltip: {
             formatter: function () {
                    return this.point.name + '<br/><b>' + this.x + '</b><br/><b>' + this.y + '</b><br/>custom text: '+this.point.options.customParam;
                }
            },
    

    http://jsfiddle.net/JKLzy/2/