javascript - How to create Master-Detail charts in highcharts-ng -

i using highcharts-ng creating dynamic charts in 1 of our angularjs application.

highcharts-ng working simple chart. unable figure out way use highchart's master-detail chart through highcharts-ng module.

below code written referring master-detail chart demo on highcharts website. renders master chart (not correctly though) not renders detail chart there no way pass subchart parent chart in highcharts-ng module.

please have , suggest if there possibility create master-detail charts using highcharts-ng module. highly appreciated.

jsfiddle : jsfiddle.net/hb7lu/8420/

html:

<div ng-controller="chartctrl" ng-init="createmasterchart();">   <div id="container">     <highchart id="spectrum-detail" config="spectrumdetailchart"></highchart>      <highchart id="spectrum-master" config="spectrummasterchart"></highchart>   </div> </div> 

css:

 #container{position:relative;}  #spectrum-master{position:'absolute',top:300,height:100,width:'100%'}; 

script:

  // create detail chart   $scope.createdetailchart = function(masterchart) {     // prepare detail chart     var detaildata = [],     detailstart = date.utc(2008, 7, 1);      $.each(masterchart.series[0].data, function () {       if (this.x >= detailstart) {     detaildata.push(this.y);       }     });      // create detail chart referenced global variable     $scope.spectrumdetailchart = {       chart: {     marginbottom: 120,     reflow: false,     marginleft: 50,     marginright: 20,     style: {       position: 'absolute'     }       },       credits: {     enabled: false       },       title: {     text: 'historical usd eur exchange rate'       },       subtitle: {     text: 'select area dragging across lower chart'       },       xaxis: {     type: 'datetime'       },       yaxis: {     title: {       text: null     },     maxzoom: 0.1       },       tooltip: {     formatter: function () {       var point = this.points[0];       return '<b>' + point.series.name + '</b><br/>' +           highcharts.dateformat('%a %b %e %y', this.x) + ':<br/>' +           '1 usd = ' + highcharts.numberformat(point.y, 2) + ' eur';     },     shared: true       },       legend: {     enabled: false       },       plotoptions: {     series: {       marker: {         enabled: false,         states: {           hover: {             enabled: true,             radius: 3           }         }       }     }       },       series: [{     name: 'usd eur',     pointstart: detailstart,     pointinterval: 24 * 3600 * 1000,     data: detaildata       }],        exporting: {     enabled: false       }     };   };    // create master chart   $scope.createmasterchart = function () {     $scope.spectrummasterchart = {       chart: {     reflow: false,     borderwidth: 0,     backgroundcolor: null,     marginleft: 50,     marginright: 20,     zoomtype: 'x',     events: {        // listen selection event on master chart update       // extremes of detail chart       selection: function (event) {         var extremesobject = event.xaxis[0],             min = extremesobject.min,             max = extremesobject.max,             detaildata = [],             xaxis = this.xaxis[0];          // reverse engineer last part of data         $.each(this.series[0].data, function () {           if (this.x > min && this.x < max) {             detaildata.push([this.x, this.y]);           }         });          // move plot bands reflect new detail span         xaxis.removeplotband('mask-before');         xaxis.addplotband({           id: 'mask-before',           from: date.utc(2006, 0, 1),           to: min,           color: 'rgba(0, 0, 0, 0.2)'         });          xaxis.removeplotband('mask-after');         xaxis.addplotband({           id: 'mask-after',           from: max,           to: date.utc(2008, 11, 31),           color: 'rgba(0, 0, 0, 0.2)'         });           detailchart.series[0].setdata(detaildata);          return false;       }     }       },       title: {     text: null       },       xaxis: {     type: 'datetime',     showlastticklabel: true,     maxzoom: 14 * 24 * 3600000, // fourteen days     plotbands: [       {         id: 'mask-before',         from: date.utc(2006, 0, 1),         to: date.utc(2008, 7, 1),         color: 'rgba(0, 0, 0, 0.2)'       }     ],     title: {       text: null     }       },       yaxis: {     gridlinewidth: 0,     labels: {       enabled: false     },     title: {       text: null     },     min: 0.6,     showfirstlabel: false       },       tooltip: {     formatter: function () {       return false;     }       },       legend: {     enabled: false       },       credits: {     enabled: false       },       plotoptions: {     series: {       fillcolor: {         lineargradient: [0, 0, 0, 70],         stops: [           [0, highcharts.getoptions().colors[0]],           [1, 'rgba(255,255,255,0)']         ]       },       linewidth: 1,       marker: {         enabled: false       },       shadow: false,       states: {         hover: {           linewidth: 1         }       },       enablemousetracking: false     }       },        series: [     {       type: 'area',       name: 'usd eur',       pointinterval: 24 * 3600 * 1000,       pointstart: date.utc(2006, 0, 1),       data: data     }       ],        exporting: {     enabled: false       }     };     $scope.createdetailchart($scope.spectrummasterchart);   };