I have a highcharts page/column chart showing all the current roles and number of employees....ie: Developer - 3, Senior Developer - 2, Master Developer-1. I am able to display tooltip information for each category just fine. What i cant do is summarize / combine that info in a tooltip. Current tooltip code:

         tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><b>{point.name}</b>: {point.percentage:.1f} %',
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        'Total: ' + this.point.stackTotal;
                }

            },

When I hover over the Developer column I would like to see ONE tooltip with all the developer info in one tooltip: John Smith - ABC123 - Developer Karen Adams - XYZ553 - Developer Louis Hughes - HGT123 - Developer

As opposed to 3 separate tooltips when i hover over the related column. Sorry if this is confusing :(

enter image description here

2 Answers

0
Hien Nguyen On

You need add $.each for points like this

tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><b>{point.name}</b>: {point.percentage:.1f} %',
                    formatter: function () {
                        let s = "";
                        $.each(this.points, function () {
                        s += '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>' +
                            'Total: ' + this.point.stackTotal;
                        }
                        return s;
                    }

                },

This is a demo about formatter http://jsfiddle.net/viethien/ryz5c8o3/23/

0
ppotaczek On

You need to enable the shared option for a tooltip:

tooltip: {
    shared: true
}

Live demo: https://jsfiddle.net/BlackLabel/ta4yn8L7/

API: https://api.highcharts.com/highcharts/tooltip.shared