resize on load of highcharts in gridster widget

Question

Found a couple of posts that came close to solving this. I'm loading a chart into a widget and it's not filling it, instead it's centered and extended past the widget - about only 1/3 of the pie chart shows for example.

I found the resize options for gridster and it gets me almost there... the same problem exists when I load the page, but when I resize the widget the chart fills it in perfectly.

I've tried aligning the chart, removing width and height settings, addeing resize and stop elements to gridsters..

   var gridster = null;
        $(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'});
        });

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'User data',
        style: {"fontSize": "15px" , "color":"red"},
    },
    subtitle: {
        text: 'Source: Click the slices to view categories.'
    },
    plotOptions: {
        pie: {
                showInLegend: false,
                dataLabels: {
                    formatter: function(){
                        console.log(this);
                        if (this.percentage > 5)
                            return this.key + ': ' + this.y;
                        else 
                            this.point.visible = false;
                            return '';
                    }
                }
            },
        series: {
            dataLabels: {
                enabled: true,
            }
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },


when page loads the pie chart is sized to fit into the gridster widget.

Answer 1

Add one div wrapper around widget and add class which having height and width of that widget. It will render your highchart graph in that wrapper only.

<div class="size-1x1"> 
  Render your graph code here
</div>

CSS:
.size-1x1 {
  height:100px;
  width: 120px;
}