Highcharts - Barchart drill down

[bhanu617]

We are using HighCharts with ExtJs6. We are able to create the bar chart but unable to do the drill down. Our actual use case is we have parent and child relation ship between customers. We show all parents in the bar chart and when ever user clicks on any bar we need to show his/her childs. Can you please help to implement the drill down facility in this.

Below is the code snippet for the Chart:

Code:
var panel = Ext.create('Ext.panel.Panel', {

   items: [
        {
            xtype: 'highchart',

             height: 600,
            width: 900,
            store: tempStore,
            chartConfig: {
                chart: {
                   type: 'bar'
                },
                title: {
                   text: 'Top 10 Past Due >30 Days'
                },
                subtitle: {
                    text: 'Click the bars to view indetailed amounts'
                },
                tooltip: {
                    pointFormat: 'Dollars in USD: <b>{point.y:.1f}</b>'
                },
                colors: [
                    '#C00000', 
                    '#660033', 
                    '#FF3300', 
                    '#FF9900', 
                    '#CC00CC', 
                    '#6600FF', 
                    '#3366CC', 
                    '#00CC99', 
                    '#33CC33'
                ],
                plotOptions: {
                    bar: {
                        colorByPoint: true,
                        point: {
                                   events: {
                                            click: function() {
                                                    alert("clicked");
                                            }
                                            }
                            }
                    }
                },
                xAxis: {
                    categories: [],
                    labels: {
                       rotation: 0,
                       style: {
                           fontSize: '11px',
                           fontFamily: 'Verdana, sans-serif'
                       }
                    },
                    crosshair: true
                    },
                    yAxis: {
                        title: {
                           text: 'Dollars'
                        }
                    }
                },
                series: [{
                        type: 'bar',
                        showInLegend: false,
                        xField: 'customerName',
                        yField: 'dueAmount',
                        xField: 'customerName',
                        dataLabels: {
                           enabled: true,
                           rotation: 0,
                           color: '#FFFFFF',
                           align: 'right',
                           format: '{point.y:.1f}', // one decimal
                           y: 0, // 10 pixels down from the top
                           style: {
                               fontSize: '11px',
                               fontFamily: 'Verdana, sans-serif'
                           }
                        }
                    }],
        }
    ]
});

Below is the code snippet for the Ext Store:

var tempStore = new Ext.data.JsonStore( {
storeId : id,
proxy:{ type: 'ajax',
actionMethods : {
read : 'POST'
},
url : someurl.do,

reader: {
type: 'json',
rootProperty: 'rows'
}
},
fields : [ 'amountsId','name','amount'],

autoLoad : true
});

[sairamkap]

Hi,
Did you find a solution for this ?

[JoeKuan]

Sorry, I haven't used Highcharts for a long time due to commitment of other projects.