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

Answer 2

In my case chart.reflow() wasn't good. You can use chart.setSize(width, height)

I have event on resize.stop callback and listener in function responsible for drawing charts which contains:

var height = $('#HighartsContainer').closest("li").height() - 50; //50: margin, padding, etc
var width = $('#HighartsContainer').closest("li").width() - 10;

you can also set new height or weight of container:

$('#HighartsContainer').css('height', height);

self.chart.setSize(width, height, false);

Answer 3

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.