puffster
Posts: 17
Joined: Fri Jan 30, 2015 2:29 pm

Drilldown From Grouped Columns to Grouped Columns...

I have a highcharts column chart with grouped columns. It has a drilldown to a secondary chart that also has grouped columns. Heres a link to the chart: https://assessment.jefferson.kyschools. ... dReferrals

The problem I'm trying to solve for, if you click on any of the columns, it only drills down to the data for the specific year you clicked on. If you click on the category label for the grouped columns, however, it drills down to show both years of data for the category you clicked on. This makes perfect sense and I don't think it's a bug, but still I'd like for them to see both years of grouped data even when they click on the columns. If I cannot make it do that, is there a way to make the column so that it is not drillable, and only the category labels are?

Here's a snippet of my highcharts script so you can see how I coded it...I have a lot of dynamic coding happening so this is not the exact code, pardon me if the syntax is off a little bit:

Code: Select all

        chart: {
            backgroundColor: 'whiteSmoke',
            events: {
                drilldown: function () {
                    switch (this.ddDupes[0]) {
                        case 'elem':
                        case 'elem2':
                            refChart.xAxis[0].setCategories(categoriesElem);
                            break;
                        case 'mid':
                        case 'mid2':
                            refChart.xAxis[0].setCategories(categoriesMid);
                            break;
                        case 'high':
                        case 'high2':
                            refChart.xAxis[0].setCategories(categoriesHigh);
                            break;
                        default:
                            break;
                    }

                    refChart.xAxis[0].update({ max: 5 }, true);

                    this.update({
                        scrollbar: {
                            enabled: true
                        }
                    }, false);
                },
                drillupall: function() {
                    refChart.xAxis[0].setCategories(categoriesSL);
                    refChart.xAxis[0].update({ max: 2 }, true);

                    this.update({
                        scrollbar: {
                            enabled: false
                        }
                    }, false);
                }
            },
            type: 'column',
        },

Code: Select all

    series: [{
        data: {
            color: 'blue',
            y: 25679,
            drilldown: 'high'
        }
    }, {
        data: {
            color: 'red',
            y: 26551,
            drilldown: 'high2'
        }
    }],
    drilldown: {
        series: [{
            id: 'high',
            data: [105, 203, 304]
        }, {
            id: 'high2',
            data: [ 123, 180, 275]
        }]
    },
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Drilldown From Grouped Columns to Grouped Columns...

Hi, puffster!

Here is a magic property you've been looking for: https://api.highcharts.com/highcharts/d ... tDrilldown
When this option is false, clicking a single point will drill down all points in the same category, equivalent to clicking the X axis label.
jsFiddle: https://jsfiddle.net/BlackLabel/7ktcau6j/

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
puffster
Posts: 17
Joined: Fri Jan 30, 2015 2:29 pm

Re: Drilldown From Grouped Columns to Grouped Columns...

Well I don't feel at all silly...that was it -- thank you very much!!!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Drilldown From Grouped Columns to Grouped Columns...

You're welcome ;)
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”