Resize issue while gridster.js with highcharts

Question

Highcharts inside the gridster widgets not resize automatically when I resize the gridster widgets. When I resize the window, highchart are resized based on the grid sizes.

Answer 1

According to the Highcharts api, automatic reflow only occurs on window.resize events. You'll have to do this explicitly. I'd simply do it in gridster's resize.stop callback:

gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
      helper: 'clone',
      resize: {
        enabled: true,
        stop: function(e, ui, $widget) {
          Highcharts.charts[0].reflow(); // reflow the first chart...
        }
      }
   }).data('gridster'); 

Example fiddle here.