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

use `BaseChart.setSize()` or `BaseChart.setSizeToMatchContainer()` to fit the chart as per container's size. Make sure container implements `ProvidesResize` — Braj, May 09 '19 at 10:24

score 0 · Answer 1 · answered Nov 07 '13 at 12:41

0

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

answered Nov 07 '13 at 12:41

Ronan Quillevere

3,699
1
29
44

This solve the problem of the initial size, but when you resize the browser windows, the size of the chart is stuck on the initial size. – Magallo Dec 11 '15 at 14:51

score 0 · Answer 2 · answered Dec 14 '15 at 11:59

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.

score -1 · Answer 3 · answered Jun 05 '15 at 21:31

-1

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

answered Jun 05 '15 at 21:31

Yaroslav Sapozhnyk

1

I did as suggested. I created a MyHighChart class that extends Chart and implement RequiresResize interface. I override onResize() method calling setSizeToMatchContainer() inside but for some reasons, the onResize() method is never called by the framework. Do you have an idea why? That result is that when program starts, the chart is shown properly (because of the the scheduleDeferred technique described above) but every time the browser window is resized, the onResize() method is not called so the size of the Chart is never updated and is stuck on the initial size. Please help. – Magallo Dec 11 '15 at 16:27

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

3 Answers3