CODEWITHSUNDEEP
javascriptjqueryhighcharts
Jeremy Green
Jeremy Green

Reputation: 25

Highcharts donut separate tooltips for inner and outer pie

I am building a Highcharts donut chart with specific data for each slice of both pies. Tooltip data is passed inside the drilldown portion of the data and is displayed correctly for the outer ring.

The inner tooltip however is passed by the main data variable and shows the tooltip for the last outer ring that was hovered over.

I would like to specify the data for the inner tooltip as follows:

data = [{
    y: 44.73,
    color: '#2f7ed8',
    drilldown: {
        name: 'Unknown',
        categories: ['Google', 'Unknown'],
        data: [0.00, 44.73],
        tooltip_data: ['Google tooltip', 'Unknown tooltip']
    }, 
    tooltip_inner: 'Inner Tooltip here'
} ...

My question is, can I pick up which graph is being hovered over (inner or outer) and modify which tooltip is returned by the formatter? The formatter returns the correct data if I do it so:

tooltip: {
    useHTML: true,
    formatter: function() {
        return this.point.tooltip_data;
    }
}

Switching the returned data to this.point.tooltip_inner works for the inner pie but of course disregards the outer. I need to be able to switch which point data is returned from tooltip_data if outer to tooltip_inner if inner.

Fiddle with variables for each slice is here: http://jsfiddle.net/bQqM8/

Edit: The fiddle now contains the working example in case anyone else needs to do this.

Upvotes: 1

Views: 822

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

the problem is the way you create data, let's consider:

        trafficData.push({
            name: categories[i],
            y: data[i].y,
            tooltip_inner: data[i].tooltip_inner,
            color: data[i].color,
            tooltip_data: data[i].tooltip_data // here you are getting tooltip.data
        });

And compare that with your data: 

data = [{
                y: 33.84,
                color: '#ff0000',
                drilldown: {
                    name: 'Downloads',
                    categories: ['News', 'P2P'],
                    data: [30.36, 3.48],
                    color: '#ff0000',
                    tooltip_data: ['News drilldown data here', 'P2P drilldown data here']
                },
                tooltip_inner: 'Inner Download Tooltip'
            },
 ... 
 { another point } ]

I don't see tooltip_data in point object, only in drilldown object. Add missing tooltip_data so it will work.

Upvotes: 0

Related Questions