angularjs and highcharts / highchartsNG - renderTo not working

Question

Am using HighChartsNG in Angular. I want to explicitly render my chart in a given Div, so I use the options.chart.renderTo = 'divId', but that doesn't seems to be working

JSFiddle Demo

html:

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div>top</div>
        <hr/>
        <div id="middle">middle</div>
        <hr/>
        <div>bottom</div>
        <hr/>
        <highchart id="chart1" config="highchartsNG"></highchart>
    </div>
</div>

JS

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {
    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'bar',
                renderTo: 'middle'
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        title: {
            text: 'Hello'
        },
        loading: false
    }

});

In the example above, am trying to render the chart explicitly to 'middle' div, but that does not seems to be happening. What am I doing wrong?

Answer 1

It's not possible as far as I can see. The highcharts-ng.js renders the chart to element[0] always. This is initialised within the link function of the angular directive. The value provided in the config options is overridden.

This is a reduced call stack and extract from highcharts-ng.js

link: function (scope, element, attrs) {
...
   var mergedOptions = getMergedOptions(scope, element, config);
...
}

var getMergedOptions = function (scope, element, config) {
...
   mergedOptions.chart.renderTo = element[0]; //line 96
...
}