tojuec
Posts: 4
Joined: Thu Dec 05, 2019 1:01 pm

Grouped stacked column chart with tooltip for each stack

Hello!

I have a grouped stacked column chart with two stacks for each year.
For example lets say "sold vehicles" split by type, stack one is "bikes" and stack two is "cars".
I now want each of this stacks to have an individual tooltip, listing all series for that
stack (so e.g. VW + Audi for the cars stack) and the sum of this stack.
Is that poossible?

Code: Select all

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'column'
        },
        xAxis: {
            categories: [2017, 2018, 2019, 2020],
        },


        tooltip: {
           shared: true
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                  
            }
        },

        series: [{
            name: 'Audi',
            data: [5, 3, 4, 7, 2],
            stack: 'cars',
        }, {
            name: 'VW',
            data: [3, 4, 4, 2, 5],
            stack: 'cars',
        }, {
            name: 'Kettler',
            data: [2, 5, 6, 2, 1],
            stack: 'bikes',
        }, {
            name: 'Binachi',
            data: [3, 0, 4, 4, 3],
            stack: 'bikes',
        }]
    });
});


Thanks in advance
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Grouped stacked column chart with tooltip for each stack

Hi,

Welcome to our forum and thanks for contacting us with your question!

You can loop through all series and points, find points in correlation and then display them properly in tooltip.formatter. You can also set your own effect after mouse over a given series.

Live demo: http://jsfiddle.net/BlackLabel/nr6km382/

Let me know if you have any further questions.

Best regards!
jfoti
Posts: 5
Joined: Sat Feb 27, 2021 8:10 pm

Re: Grouped stacked column chart with tooltip for each stack

Hi,
I am trying to get a StackColumn Chart to position tooltips over the entire stack no matter which series I roll over. I am using the formatter but am having trouble when rolling over a series other than 0, getting the coordinates to be able to position the tooltip affectively. I know I can fix the plotY value near the top but not dynamically for shortened stacked series (it ends up being too far away in many cases or overlapping when the series gets larger). Is there a way to add up the individual series heights and subtract the chart height?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Grouped stacked column chart with tooltip for each stack

Hi,
We appreciate you reaching out to us!

Could you show me your example in the online code editor?
This will help us understand your case better.

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”