bboybeatle
bboybeatle

Reputation: 567

Custom tooltip data for specific points on highchart

I would like to display a warning, or explanation, in the tooltip, only when you hover over a specific one or two points. These warnings will be unique to that point so can't be repeated.

I've put the custom text 'WARNING' and 'WARNING 2' within the series data, but can't seem to call that data back once per tooltip that contains it.

My series data looks like this:

series: [{
        color: '#333',
        name: 'Pre-tax profits',
        data: [{y: 811, custom: 'WARNING'}, 881, 465, -137, 491, 567, 284, 35, 675]

    }, {
        color: '#00adef',
        name: 'Revenues',
        data: [2663, 2300, 1851, 1782, { y: 2103, custom: 'WARNING 2'}, 2154, 1665, 1666, 2149]

    }]

The 'y' seems superfluous but I get an error without it.

Here is how I've called it so far in the tooltip formatter...

formatter: function () {

            var s = '<b>' + this.x + '</b>';

            $.each(this.points, function () {
                s += '<br/>' + this.series.name + ': ' + this.y + 'm';
                s += '<h2>' + this.point.custom + '</h2>';          
            });

            return s;

        },

Because I'm calling it within each point I'm getting undefined on most of them when really I only want to call it once if it has this warning, per tooltip. Maybe I could make a whole new serie just with these warnings in that only shows in the tooltip?

Heres a demo to see what I'm talking about...

http://thetally.efinancialnews.com/tallyassets/barclays-ib/index.html

Upvotes: 1

Views: 328

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

The custom param is in the point.options object. Use that this.point.options.custom to extract your value.

Upvotes: 0

wergeld
wergeld

Reputation: 14442

You need to check for existence of the custom property in your s builder. If the propery exists then append it to the tooltip string, if not, then do nothing (or something else).

Upvotes: 1

Related Questions