Connected charts in highcharts

Question

I have two charts in my application developed using Highcharts. I need to connect them together. Meaning when one chart is clicked then the other chart needs to be updated as well.

I have done something the same with PowerBI. Now I need to develop it using Highcharts. I have attached a screenshot of the expected behavior. It doesn't need to be the exact as same. What I need is a way to update the remaining charts to show a information related to the selected data set in the first chart.

can someone tell me a way to get this done using Highcharts? Is it possible with Highcharts?

Answer 1

Highcharts has mutliple methods, such as chart.update or series.setData , which allow to update the chart dynamically:

var chart1 = Highcharts.chart('container', {
    series: [{
        type: 'pie',
        data: [10, 20],
        events: {
            click: function() {
                chart2.update(additionalOptions, true, true);
            }
        }
    }]
});

var chart2 = Highcharts.chart('container1', {
    series: [{
        type: 'column',
        data: [1, 2, 3, 4]
    }]
});

var additionalOptions = {
    chart: {
        type: 'column'
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        data: [1, 2, 3, 4]
    }, {
        data: [1, 2, 3, 4]
    }]
}

---

Live demo: http://jsfiddle.net/BlackLabel/5a4z0qbk/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Chart#update

https://api.highcharts.com/class-reference/Highcharts.Series#setData