Pop up informations on a drilldown chart using Highcharts

Question

I have a column chart with multi-level drill down option. I need to display tabular information about a particular column on second level drill down. The information on drill down or on a pop up modal will do the work. I made the char using HighCharts. This is my code and drilldown works perfectly.

    Highcharts.chart('containerbreachgraph', {
    chart: {
    type: 'column'
},
exporting: {
    enabled: false
},
title: {
    text: 'SLA Breaches in 30 days'
},
subtitle: {
    text: ''
},
xAxis: {
    type: 'category',
      title:{
    text: ''
}
},
yAxis: {

      title:{
    text: 'Count'
}
},
plotOptions: {
    series: {

        borderWidth: 0,
        dataLabels: {
            enabled: true

        }

    }
},
series: [{

        name: 'SLA Breaches',

        data: [{
                name: 'Under Development',
                y: 75,
                drilldown: 'Under Development',
                color: 'rgb(2, 136, 209)'
            }, {
                name: 'UAT',
                y: 34,
                drilldown: 'UAT',
                color: 'rgb(2, 136, 209)'
            }, {
                name: 'Product Implementation Approval',
                y: 82,
                drilldown: 'PI Approval',
                color: 'rgb(2, 136, 209)'

            }]
    }],
drilldown: {
    allowPointDrilldown: true,
    "series":
            [

                {
                    "id": "Under Development",
                    "name": "Under Development",
                    "colorByPoint": true,
                    "data": [
                        {
                            "name": "COB TEAM",
                            "y": 50,
                            "drilldown": "Under Development COB TEAM"
                        },
                        {
                            "name": "Power ATM",
                            "y": 20,
                            "drilldown": "Under Development Power ATM"
                        },
                        {
                            "name": "BaNCS Team",
                            "y": 5,
                            "drilldown": "Under Development BaNCS Team"
                        }

                    ]
                },
                {
                    "id": "PI Approval",
                    "name": "PI Approval",
                    "colorByPoint": true,
                    "data": [
                        {
                            "name": "COB TEAM",
                            "y": 12,
                            "drilldown": "PI Approval COB TEAM"
                        },
                        {
                            "name": "Power ATM",
                            "y": 20,
                            "drilldown": "PI Approval Power ATM"
                        },
                        {
                            "name": "BaNCS Team",
                            "y": 50,
                            "drilldown": "PI Approval BaNCS Team"
                        }

                    ]
                },
                {
                    "id": "UAT",
                    "name": "UAT",
                    "colorByPoint": true,
                    "data": [
                        {
                            "name": "COB TEAM",
                            "y": 14,
                            "drilldown": "UAT COB TEAM"
                        },
                        {
                            "name": "Power ATM",
                            "y": 10,
                            "drilldown": "UAT Power ATM"
                        },
                        {
                            "name": "BaNCS Team",
                            "y": 10,
                            "drilldown": "UAT BaNCS Team"
                        }

                    ]
                },

                {
                    "name": "Under Development COB TEAM",
                    "id": "Under Development COB TEAM",
                    "data": [
                        [
                            "CSAS",
                            12
                        ],
                        [
                            "COB",
                            8
                        ],
                        [
                            "CMRP",
                            13
                        ],
                        [
                            "CSAS Credit",
                            7
                        ],
                        [
                            "CMRP Update",
                            3
                        ],
                        [
                            "CSAS IB/MB",
                            3
                        ],
                        [
                            "CAMS Update",
                            4
                        ]
                    ]
                },
                {
                    "name": "PI Approval COB TEAM",
                    "id": "PI Approval COB TEAM",
                    "data": [
                        [
                            "CSAS",
                            3
                        ],
                        [
                            "COB",
                            2
                        ],
                        [
                            "CMRP",
                            3
                        ],
                        [
                            "CSAS Credit",
                            1
                        ],
                        [
                            "CMRP Update",
                            1
                        ],
                        [
                            "CSAS IB/MB",
                            0
                        ],
                        [
                            "CAMS Update",
                            2
                        ]
                    ]
                },
                {
                    "name": "UAT COB TEAM",
                    "id": "UAT COB TEAM",
                    "data": [
                        [
                            "CSAS",
                            2
                        ],
                        [
                            "COB",
                            5
                        ],
                        [
                            "CMRP",
                            3
                        ],
                        [
                            "CSAS Credit",
                            2
                        ],
                        [
                            "CMRP Update",
                            1
                        ],
                        [
                            "CSAS IB/MB",
                            0
                        ],
                        [
                            "CAMS Update",
                            1
                        ]
                    ]
                },
                {
                    "name": "PI Approval Power ATM",
                    "id": "PI Approval Power ATM",
                    "data": [
                        [
                            "CSAS",
                            12
                        ],
                        [
                            "COB",
                            2
                        ],
                        [
                            "SCMS",
                            3
                        ],
                        [
                            "HRMS",
                            2
                        ],
                        [
                            "MMS",
                            1
                        ],
                        [
                            "CMRP",
                            0
                        ]
                    ]
                },
                {
                    "name": "Under Development Power ATM",
                    "id": "Under Development Power ATM",
                    "data": [
                        [
                            "CSAS",
                            5
                        ],
                        [
                            "COB",
                            3
                        ],
                        [
                            "SCMS",
                            2
                        ],
                        [
                            "HRMS",
                            10
                        ],
                        [
                            "MMS",
                            0
                        ],
                        [
                            "CMRP",
                            0
                        ]
                    ]
                },
                {
                    "name": "UAT Power ATM",
                    "id": "UAT Power ATM",
                    "data": [
                        [
                            "CSAS",
                            5
                        ],
                        [
                            "COB",
                            3
                        ],
                        [
                            "SCMS",
                            0
                        ],
                        [
                            "HRMS",
                            1
                        ],
                        [
                            "MMS",
                            0
                        ],
                        [
                            "CMRP",
                            1
                        ]
                    ]
                },

                {
                    "name": "Under Development BaNCS Team",
                    "id": "Under Development BaNCS Team",
                    "data": [
                        [
                            "CSAS",
                            0
                        ],
                        [
                            "COB",
                            0
                        ],
                        [
                            "SCMS",
                            0
                        ],
                        [
                            "HRMS",
                            1
                        ],
                        [
                            "MMS",
                            0
                        ],
                        [
                            "CMRP",
                            0
                        ]
                    ]
                },

                {
                    "name": "UAT BaNCS Team",
                    "id": "UAT BaNCS Team",

                    "data": [
                        [
                            "CSAS",
                            2
                        ],

                        [
                            "HRMS",
                            2
                        ],
                        [
                            "MMS",
                            1
                        ],
                        [
                            "CMRP",
                            5
                        ]
                    ]
                },

                {
                    "name": "PI Approval BaNCS Team",
                    "id": "PI Approval BaNCS Team",

                    "data": [
                        [
                            "CSAS",
                            20
                        ],
                        [
                            "HRMS",
                            10
                        ],
                        [
                            "MMS",
                            5
                        ],
                        [
                            "CMRP",
                            5
                        ]
                    ]
                }




            ]
}

});

Answer 1

You can use drilldown event and display the information in some pop up:

chart: {
    type: 'column',
    events: {
        drilldown: function(e) {
            if (e.point.series.name === 'SLA Breaches') {
                // first level drilldown
                alert('first level drilldown');
            } else {
                alert('drilldown');
            }
        }
    }
},

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

API Reference: https://api.highcharts.com/highcharts/chart.events.drilldown