Highcharts integration in Angular-gridster

Question

I am trying to integrate Highharts using the highcharts-ng Angular directive inside Angular-grister ( Angular panel / widget directive).

Here is my HTML:

<div ng-controller="myCtrl"> <div gridster="gridsterOptions"> <ul> <li gridster-item="item" ng-repeat="item in standardItems"> <highchart id="chart1" config="chartConfig" class="chart"></highchart> </li> </ul> </div> </div> 

My CSS style:

 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; } 

And my Angular app:

 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 }; }); 

This leads to something similar with widgets in the grid toolbar:

There are two problems in the response layout:

• The height of Highchart components is always 400 px. They are located inside the dashboard widget and should have the same height as the widget. They are currently taller than their dashboard widget, and their contents are full.
• When rendering, Highcharts components are wider than their container. If I resized the windows, they will be repainted, and now the width will be correct.

How can I fix these problems?

See my demo on JSFiddle: http://jsfiddle.net/dennismadsen/xxy2uy9x/

Answer 1

I think this is a duplicate of this or this question. Or at least the answer is very similar.

In short: when a graph is displayed, the width and height for the container is undefined or 0 (the container is not part of the DOM or display: none is hidden), which leads to the default width and height for the graph.

The workaround is to give the browser (and angular) a breath and call chart.reflow() in setTimeout (or $timeout ) so that the chart can adapt to the container, see http://jsfiddle.net/xxy2uy9x/5/

 $scope.chartConfig = { options: { chart: { type: 'bar', events: { load: function() { var c = this; setTimeout(function() { c.reflow(); }, 123) } } } }, series: [{ data: [10, 15] }], title: { text: 'Hello' }, loading: false };