Highchart on bar item click event

Question

I have 2 different functions (Function A and B). on bar item click can't call both the functions at the same time

series: [{
        name: 'Chart 1',
        data: [{
            y: 1,
            name: 'apple'
        }, {
            y: 64,
            name: 'mango'
        }, {
            y: 89,
            name: 'banana'
        }],
        point: { events: { click: function A, function B } }
    }]
});

the above code throws error as I can see blank screen on my browser

Answer 1

I think you should use the click event like here. Define a function that calls both A and B

point: { events: { click: function (e) {
   A();B();
 }}

I have update your example.. there are many errors

I have made some edits, just to show chart3 on click on the first chart.

look here

$(function () {
var data = {
        animal: [2,3,1,6],                                                    
        vehicle: [03, 15, 14],
        fruits: [20,50 ,100]
    };
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        plotOptions: {
            bar: {
                point: {
                    events: {
                        click:     function (e) {
   hideChart(e);Chart3(e);
 }
                    }
                }
            }
        },
        series: [
{
            data: [{
                y: 100,
                name: 'animal'
            }, {
                y: 34,
                name: 'vehicle'
            }, {
                y: 67,
                name: 'fruits'
            }]
        }]
    });
function hideChart(e) {

                    $("#container").toggle();
             }

    function Chart2(e) {

        var point = this;

        $("#detail").highcharts({
    chart: {
        type: 'column'
     },
plotOptions: {
            series: {

                point: {
                    events: {
                        click: function (e) {
   Chart3(e);
 }
                    }
                }
            }
        }, title: {
                text: point.name + ':' + point.y
            },

           series: [{
        name: 'series 2',
        colorByPoint: true,
                data: data[point.name]
            }]
        });
    }
function Chart3(e) { 
            var data = [[1, 9], [1],[4,6,7,2,9],[0,5,10],[3,7]];
            $("#sub_detail").highcharts({
                chart: {
                type: 'column',
                useHTML: true,

            },
            plotOptions: {
                series: {

                point: {
                events: {
                click: function() {
                            alert ('Category: ');
                        }
            }
                        },
                    allowPointSelect: true,
                            states: {
                                    select: {
                                        color: null,
                                        borderWidth:5,
                                        borderColor:'Blue'
                                    }
                                }
                    }
            }, 
            title: {
                text: this.x 
            },

            series: [{
                name: 'series 3',
                colorByPoint: true,
                data: data[this.x] 
            }]
            });
        }
});