Highcharts-NG is only listening to some of my chart config options

Question

I am trying to utilize highcharts-ng in my angular application. I've never used high charts which is causing me some pains...

I'm trying to create a directive for my charts. I understand the chart is already a directive but I wish to put it in a directive so I can load data into them from my database more easily as I will have several per page.

The chart is showing the correct data but as a line chart instead of a bar chart. The height variable is all so not translating into the chart.

I included a photo of the current results below. [Notice it is not a 100px tall bar chart]

angular.module('app').directive('forcastChart', function () {
return {
    restrict:'E',
    scope: {},
    templateUrl: '<highchart config="chartConfig"></highchart>',

    link: function ($scope, element, attrs) {

        $scope.title="CHAFRT?"

        $scope.chartConfig = {
            options: {
                chart: {
                    type: 'bar'
                }
            }, 
            series: [{
                showInLegend: false,
                data: [10, 15, 12]
            }],
            xAxis: [{
                categories: ['a','b','c']
            }], 
            size: {
               height: 100
            },
            title: {
                text: null  
            },
            loading: false,
            chart: {
                type: 'columns'
            }
        }
    }//end of link
}});

Answer 1

If you set up the config in the directive controller rather than in the link function it works and keeps the categories - see fiddle. Not sure why, I guess it is something with how the highcharts-ng library interacts with the parent directive scope.

angular.module('app', ['highcharts-ng']).directive('forcastChart', function () {
return {
    restrict:'E',
    scope: {},
    template: '<highchart config="chartConfig"></highchart>',

    controller: function($scope, $element){
       $scope.title="CHAFRT?"

        $scope.chartConfig = {
            options: {
                chart: {
                    type: 'bar'
                }
            }, 
            series: [{
                showInLegend: false,
                data: [10, 15, 12]
            }],
            xAxis: [{
                categories: ['a','b','c']
            }], 
            size: {
               height: 100
            },
            title: {
                text: null  
            },
            loading: false,
            chart: {
                type: 'columns'
            }
        }
    }
}});