How to merge two Highcharts container with the same legend-item

Question

I am trying to connect to plots (columns and pie) with the same legend items.

I would like to merge the legends, so that when I click on one (example: 1,2 or 3), it affects not only but the two highcharts containers. In this case, consumption-container-leftandconsumption-container-right. See code:

$('#consumption-container-left').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '', //Option to write title   
            y: 60

        },
        credits: {
            enabled: false
        },       
        xAxis: {
            categories: [
                time_axis[0],time_axis[1],time_axis[2],time_axis[3],time_axis[4],time_axis[5],time_axis[6],time_axis[7],time_axis[8],time_axis[9],
                time_axis[10],time_axis[11],time_axis[12],time_axis[13],time_axis[14],time_axis[15],time_axis[16],time_axis[17],time_axis[18],time_axis[19],
                time_axis[20],time_axis[21],time_axis[22],time_axis[23],time_axis[24],time_axis[25],time_axis[26],time_axis[27],time_axis[28],time_axis[29],
                time_axis[30],time_axis[31],time_axis[32],time_axis[33],time_axis[34],time_axis[35],time_axis[36],time_axis[37],time_axis[38],time_axis[39],
                time_axis[40],time_axis[41],time_axis[42],time_axis[43],time_axis[44],time_axis[45],time_axis[46],time_axis[47],time_axis[48],time_axis[49],
                time_axis[50],time_axis[51],time_axis[52],time_axis[53],time_axis[54],time_axis[55],time_axis[56],time_axis[57],time_axis[58],time_axis[59],
                time_axis[60],time_axis[61],time_axis[62],time_axis[63],time_axis[64],time_axis[65],time_axis[66],time_axis[67],time_axis[68],time_axis[69],
                time_axis[70],time_axis[71],time_axis[72],time_axis[73],time_axis[74],time_axis[75],time_axis[76],time_axis[77],time_axis[78],time_axis[79],
                time_axis[80],time_axis[81],time_axis[82],time_axis[83],time_axis[84],time_axis[85],time_axis[86],time_axis[87],time_axis[88],time_axis[89],
                time_axis[90],time_axis[91],time_axis[92],time_axis[93],time_axis[94],time_axis[95]
            ],
            labels: {
                step: 1
            }            
        },
        yAxis: {
            labels: {
                 enabled: false
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0           
        },
        plotOptions: {
            column: {
                pointPadding: -0.2,
                borderWidth: 0,
                stacking: 'normal'

            }
        },
        series: [{
            color: '#9c9e9f',
            enableMouseTracking: false,
            name: '1',
            data: (function () {
                var data = [];                    
                for (var i = 0; i <= len-1; i = i + 1) {
                    data.push(c[i]);
                }
                return data;
            }())

        },{
            color: '#003d72',
            enableMouseTracking: false,
            name: '2',
            data: (function () {
                var data = [];                    
                for (var i = 0; i <= len-1; i = i + 1) {
                    data.push(b[i]);
                }
                return data;
            }())

        },{
            enableMouseTracking: false,
            color: '#Fabb00',
            name: '3',
            data: (function () {
                var data = [];                    
                for (var i = 0; i <= len-1; i = i + 1) {
                    data.push(a[i]);
                }
                return data;
            }())

        }]

    }); // consumption-container-left 

    $('#consumption-container-right').highcharts({

            chart: {
                type: 'pie'
            },
            title:{
                text: ''

            },

            plotOptions: {
                pie: {
                    dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',                    
                    }
                }
            },
            credits: {
                 enabled: false
            }, 

            series: [{
                enableMouseTracking: false,                
                data: [{
                    name: '1',
                    y: a / sum_total * 100,
                    color: '#Fabb00' 

                },{
                    name: '2',
                    y: b / sum_total * 100 ,
                    color: '#003d72'
                },{
                    name: '3',
                    y: c / sum_total * 100,
                    color: '#9c9e9f'
                }

                ]           
            }]


    });

I appreciate any help.

Answer 1

You can disable the legend on one chart (e.g. the one with consumption-container-left as id), and add this part of code in the second chart:

plotOptions: {
            series: {
                events: {
                    legendItemClick: function (event) {
                        var XYZ = $('#consumption-container-left').highcharts(),
                            series = XYZ.get(this.options.id); //get corresponding series

                        if (series) {
                            if (this.visible) {
                                series.hide();
                            } else {
                                series.show();
                            }
                        }
                        }
                    }
                }
}

See JSFiddle here.

You have to set an ID to your data. See a post about it here.