Expose additional data based on xAxis element click - Highcharts.js

Question

I'm facing some difficulties while trying to implement 'xAxis clickable' column chart. I'm trying to expose additional Pie charts below my column chart, based on user click on one of the element in xAxis.

The way the first graph is build:

function chartBuilder(data) {

            if (data.length === 0) {
                return null;
            }

            var categories = [];
            var uniqData = [
                {name : 'Fatal', data:[], color:'black', stack: 'fatal'},
                {name : 'Critical', data:[], color:'red', stack: 'critical'},
            ];
            _.each(data, function (item) {
                categories = categories.concat(item.site);
                var fatalValue = {};
                fatalValue[item.site] = parseFloat(item.fatal || 0);
                uniqData[0].data = uniqData[0].data.concat(fatalValue);
                var criticalValue = {};
                criticalValue[item.site] = parseFloat(item.critical || 0);
                uniqData[1].data = uniqData[1].data.concat(criticalValue);
            });

            var chartConfig = util.basicConfigChart(categories, uniqData);
            chartConfig.yAxis.title = {
                text: 'Num Of Events'
            };
            chartConfig.xAxis.labels = {

                formatter: function() {
                    var ret = this.value,
                        len = ret.length;

                    if (len > 10) {
                        ret = '<strong>' + ret.slice(0,ret.indexOf('_')) + '<br/>' + ret.slice(ret.indexOf('_') + 1, len) + '</strong>';
                    }

                    if (len > 25) {
                        ret = ret.slice(0,25) + '...';
                    }

                    return '<strong>' + ret + '</strong>';
                },
                useHTML: true
            };
            chartConfig.options.tooltip = {
                formatter : function () {
                    return '<strong>' + this.series.name + '</strong>:' + this.point.y + '<br>Total: ' + this.point.total;
                }
            };
            return chartConfig;
        }

So basically, what I need is a way to determine which element in xAxis was clicked, and expose below pie charts with data relevant to this element.

Answer 1

If I understand you correctly, you want to add a click event on the xAxis columns. This can be done using a click event

events: {
  click: function (event) {
    alert(
      'x index: ' + event.point.x + ', \n' +
      'series.index: ' + event.point.series.index
    );
  }
}

This event can be added to a specific series, or to the plotOptions to affect all series.

The code above, will make an alert that shows the relevant indexes.

Working example: https://jsfiddle.net/ewolden/xr17pen6/6/

API on click event: https://api.highcharts.com/highcharts/series.column.events.click