title: Integrating Highcharts into Angular-gridster
body: <p>I'm trying to integrate Highharts using the <a href="https://github.com/pablojim/highcharts-ng" rel="nofollow noreferrer">highcharts-ng</a> Angular directive inside <a href="https://github.com/ManifestWebDesign/angular-gridster" rel="nofollow noreferrer">Angular-grister</a> (a dashboard/widget Angular directive). </p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div ng-controller="myCtrl"&gt;
      &lt;div gridster="gridsterOptions"&gt;
          &lt;ul&gt;
              &lt;li gridster-item="item" ng-repeat="item in standardItems"&gt;
                  &lt;highchart id="chart1" config="chartConfig" class="chart"&gt;&lt;/highchart&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS styling:</p>
  
  <pre><code>body {
      color: #858584;
      background-color: #e0e0e0;
  }
  .gridster .gridster-item {
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      color: #004756;
      background: #ffffff;
      padding: 10px;
  }
  .chart {
      border:1px #000 solid;
  }
  </code></pre>
  
  <p>And my Angular app:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['gridster', 'highcharts-ng']);
  
  myApp.controller('myCtrl', function ($scope) {
      $scope.gridsterOptions = {
          margins: [20, 20],
          columns: 4,
          rowHeight: 300,
          pushing: true,
          floating: true,
          swapping: true,
          resizable: {
              enabled: true
          },
          draggable: {
              enabled: true
          }
      };
  
      $scope.standardItems = [{
          sizeX: 2,
          sizeY: 1
      }, {
          sizeX: 2,
          sizeY: 1
      }];
  
      $scope.chartConfig = {
          options: {
              chart: {
                  type: 'bar'
              }
          },
          series: [{
              data: [10, 15]
          }],
          title: {
              text: 'Hello'
          },
  
          loading: false
      };
  });
  </code></pre>
  
  <p>It results in something like this with the widgets in the gridster dashboard:</p>
  
  <p><a href="https://i.stack.imgur.com/YkZGU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YkZGU.jpg" alt="Demo"></a></p>
  
  <p>There is two issues regarding responsive layout:</p>
  
  <ol>
  <li>The height of the Highchart components is always 400 px. They are located inside the dashboard widget and should have the same height as the widget. Currently they are higher then their dashboard widget and their content is overflowing.</li>
  <li>When rendering, the Highcharts components is wider then their container. If I resize the window they are repainted and width is now correct.</li>
  </ol>
  
  <p>How can I fix these issues?</p>
  
  <p>See my demo example on JSFiddle:
  <a href="http://jsfiddle.net/dennismadsen/xxy2uy9x/" rel="nofollow noreferrer">http://jsfiddle.net/dennismadsen/xxy2uy9x/</a></p>