Can highcharts drilldown of a chart, reflect on another chart?

Question

I've two separate div for charts, with ids container1 and container2, i am wondering if its possible to drilldown a stacked column in container1 and the result can show up in container2 where the stacked column in container1 remains the same. Really appreciate your help.

<div id="container1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

sample fiddle : http://jsfiddle.net/675kxe1q/

Here area chart shows up on drilldown in the same chart , is it possible to show it in different chart ?

Answer 1

What I think you want is not a drilldown but to update a second chart with detailed data from the first chart. Have a look at point.events.click. This will let you get the point that was clicked. From here you can update/set the data in a different chart. Click event logic:

plotOptions: {
  series: {
    point: {
      events: {
        click: function() {
          detailChart(this.category);
        }
      }
    }
  }
},

Then a general function that is going to create a new chart at container2:

  function detailChart(categoryName) {
    $('#container2').highcharts({
      chart: {
        type: 'column'
      },
      xAxis: {
        categories: ['week1', 'week2', 'week3', 'week5']
      },

      plotOptions: {
        series: {
          cursor: 'pointer',
          point: {
            events: {
              click: function() {
                detailChart(this.category);
              }
            }
          }
        }
      },

      series: [{
        data: [10, 20, 5, 4.9]
      }]
    });
  }

You can key off of anything not just this.category and set up your detail series as an array of data that is linked to your click key.