add chart using highcharts to angular via highcharts-ng directive

Question

I want to add a chart to my angular application. I decided to use the highchart-ng directive. here is the controller:

discoutControllers.controller('TestController', function($scope/*, $location,$route,TableUtility, TestService*/) {  

    $scope.options = {
            type: 'line'
        }

        $scope.swapChartType = function () {
            if (this.highchartsNG.options.chart.type === 'line') {
                this.highchartsNG.options.chart.type = 'column'
            } else {
                this.highchartsNG.options.chart.type = 'line'
            }
        }

        $scope.highchartsNG = {
            options: {
                chart: {
                    type: 'column'
                }
            },
            series: [{
                data: [10, 15, 12, 8, 7]
            }],
            title: {
                text: 'Hello'
            },
            loading: false
        }


});

and here is the view:

<div ng-controller='TestController' id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
                <highchart id="chart1" config="highchartsNG"></highchart>
            </div>

the problem is that nothing is rendered when I view my page and I don't know what happened.

regards,

Answer 1

https://github.com/pablojim/highcharts-ng

Here you see the section:

Add Highcharts to your Angular app config:

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

It seems that since there is no error being thrown that the directive is not actually instantiated in angular. This should help!

It is also possible that you are not including the library properly either. All should be explained on that git page.