GWT highcharts auto resize (width and height) in layout panel

Question

When you open a chart inside the center zone of a DockLayoutPanel (inside a RootLayoutPanel), the first time the chart is rendered (possibly during onModuleLoad) the chart does not have the right height/width. The chart take the size of the RootLayoutPanel not the size of the center zone.

When you resize the browser window, the chart resizes correctly. Does anyone knows how to fix this ?

@Override    
public void onModuleLoad()    
{
  RootLayoutPanel rootPanel = RootLayoutPanel.get();
  Chart chart = createChart();
  chart.setWidth100();
  chart.setHeight100();

  DockLayoutPanel dock1 = new DockLayoutPanel(Unit.PX);

  SimpleLayoutPanel slp1 = new SimpleLayoutPanel();
  slp1.getElement().getStyle().setBackgroundColor("blue");

  SimpleLayoutPanel slp2 = new SimpleLayoutPanel();
  slp2.getElement().getStyle().setBackgroundColor("yellow");

  SimpleLayoutPanel slp3 = new SimpleLayoutPanel();
  slp3.getElement().getStyle().setBackgroundColor("red");

  SimpleLayoutPanel slp4 = new SimpleLayoutPanel();
  slp4.getElement().getStyle().setBackgroundColor("green");

  dock1.addNorth(slp1, 50);
  // dock1.addSouth(slp3, 50);
  dock1.addWest(slp2, 50);
  // dock1.addEast(slp4, 50);

  dock1.add(chart);
  rootPanel.add(dock1);
}

For info i tried

 chart.redraw();
 rootPanel.forceLayout();

but it does not improve the situation

Github project example : https://github.com/mycom-int/gwthighcharts

Answer 1

Another option can be to extend Chart class and implement RequiresResize. In the onResize method schedule setSizeToMatchContainer().

Answer 2

The only sloution I found so far is to use a scheduler after the dock is added to rootpanel

      Scheduler scheduler = Scheduler.get();
      scheduler.scheduleDeferred(new ScheduledCommand()
      {

         @Override
         public void execute()
         {
            chart.setSizeToMatchContainer();
         }
      });

Answer 3

The solution is well described by Ronan Quillevere and available at the link he provided (https://github.com/mycom-int/gwthighcharts). However I would like to point out that the ChartSimpleLayoutPanel he provides as a helper container, must be added inside a container who implements the RequiresResize interface. This is a mandatory requirement to be sure the onResize() method of the ChartSimpleLayoutPanel is called to provide proper resize of the chart every time the browser window is resized.

To make some explicit example, if the container is a page implemented using uibinder, it is necessary that the page extends the ResizeComposite class and not the Composite class. Another maybe useful tip is that your container must not be contained in a FlowPanel because FlowPanel breaks the RequiresResize mechanism.

Hope this helps.