2

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?

sppc42
  • 2,994
  • 2
  • 31
  • 49
  • The short answer is you shouldn't be using renderTo with angular, this option is defying one of the main/only rules with angular which is to not make your controller be aware of or require a particular view. What's wrong with using the highcharts directive where you want it to display? – shaunhusain Apr 16 '15 at 00:08
  • 1
    See if it helps http://jsfiddle.net/csTzc/ – Reena Apr 16 '15 at 06:39

2 Answers2

3

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
...
}
Ahmad
  • 22,657
  • 9
  • 52
  • 84
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>
Amstutz
  • 565
  • 3
  • 14