how to use angular-gridster and highcharts-ng directives together in angularjs

Question

I am using angularjs-gridster (https://github.com/ManifestWebDesign/angular-gridster) with higharts-ng directive (https://github.com/pablojim/highcharts-ng/blob/master/README.md)

I am trying to generate these highcharts inside the grid cells. My problem is that the highcharts are occupying their default width and height (600px * 400px) even when i place my graph drawer function in a $timeout service. Here's the code:

HTML:

<div class="graph-list" gridster="gridsterOpts">
  <ul>
    <li gridster-item="graph.grid" class="graph-set" ng-repeat="graph in graphs | orderBy: 'number'">
      <highchart id="{{'graph' + graph.number}}" class="graph" config="graph.config"></highchart>
    </li>
  </ul>
</div>

JS:

// inside the graph-list div controller 
$scope.gridsterOpts = {
    colums: 4,
    rowHeight: 240,
    margins: [10,10],
    outerMargin: false,
    draggable: {
      enabled: false // whether dragging items is supported
    }
};
$scope.graphs = {}; //
$scope.somefunction(){ /* this function populates the graphs object */ }; 
function drawGraphs(){ /* this function populates the graph.config object by looping through all the graph objects */ }
$timeout(function(){
    drawGraphs(); 
});

I have tried creating watch on the grid-cell width and height but it shows no change. I have not given the highchart width and height explicitly in the graph.config options because I read in the highcharts-ng documentation that it takes the parent width and height by default but its not happening. Can anyone guide me what could be the possible problem.

Seems to me that the angularjs-gridster plugin is not able to set the grid width and height before the highcharts directive is able to render itself. Please help.

Answer 1

I eventually did it. I needed to add the chart.reflow() method (which just resizes the chart instead of redrawing it so better performance wise also, I guess) in the func() options as provided in the highcharts-ng documentation.

graph.config = {
  options: { },
  series: [],
  func: function (chart) {
    $timeout(function(){
      chart.reflow();
    })
  } 
} 

Hope it helps someone else.