CODEWITHSUNDEEP
javascripthighcharts
RHKnyc
RHKnyc

Reputation: 3

Can I make a custom tooltip on a highcharts drilldown?

I want to create a custom tooltip for a drill down series on high charts.

I imagine it would look something like this.

   tooltip: {
            formatter: function () {
                if (series is drill down) {
                    return :'tooltip A';
                } else {
                    return :'tooltip B';
                }
            }
        },

But I can't find any examples and "series is drilldown" is obviously not code.

Upvotes: 0

Views: 6813

Answers (3)

user1862341
user1862341

Reputation: 201

@Paweł Fus

there is no levelNumber property, and function false in your script

but there is a drilldown property can be use

pointFormatter: function() {
    if(this.hasOwnProperty("drilldown")) {
        return "<b>{series.name]:({point.y}) parent</b>";
    } else {
        return "<b>{series.name}:({point.y}) child</b>";
    }
}

Upvotes: 1

Dean
Dean

Reputation: 751

Both series and drilldown.series contain a tooltip object. This means you can customize each one individually in the correct part of the options object.

Check here:

https://api.highcharts.com/highcharts/series.column.tooltip

https://api.highcharts.com/highcharts/drilldown.series

Upvotes: 0

Paweł Fus
Paweł Fus

Reputation: 45079

Check for levelNumber property in series, see: http://jsfiddle.net/qLcZr/2/

    tooltip: {
        formatter: function() {
            if(this.series.levelNumber == 1) { 
                 return 'first level';   
            } else {
                 return  'parents level';
            }
        }
    },

OR:

For each series you can set pointFormat (formatter per series is not supported), see: http://jsfiddle.net/qLcZr/3/

    series: [{
        name: 'Things',
        colorByPoint: true,
        tooltip: {
            pointFormat: 'parent series'  
        },
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: 'animals'
        }, {
            name: 'Fruits',
            y: 2,
            drilldown: 'fruits'
        }, {
            name: 'Cars',
            y: 4,
            drilldown: 'cars'
        }]
    }],

Upvotes: 1

Related Questions