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

you can use resize callback

  $(document).ready(function () {
  gridster = $(".gridster ul").gridster({
      widget_base_dimensions: ['auto', 140],
      autogenerate_stylesheet: true,
      min_cols: 1,
      max_cols: 6,
      widget_margins: [5, 5],
      resize: {
          enabled: true,
          resize: function (e, ui, $widget) {
              Highcharts.charts[0].reflow(); // reflow the first chart...
          },
          stop: function(e, ui, $widget) {
              Highcharts.charts[0].reflow(); // reflow the first chart...
            }
      }
  }).data('gridster');
  $('.gridster  ul').css({'padding': '0'});
});