score:3

Accepted answer

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
...
}

score:3

Since you state that you want to render your chart to a given div using the renterTo from highcharts and ask what you are doing wrong, the best answer is probably that you should not use the renderTo at all. As in a other answer, it does not seem to work with HighChartsNG.

To give you nevertheless a solution to the current issue: Simply place the directive of HighChartsNg into the div where it should be displayed as follows:

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

Related Query

More Query from same tag