Resizable Charts

Vaadin 6 / 7 / 8
1

Is it possible to make Vaadin Charts resize??

It seems as though they’re perfectly capable of growing into space, but not shrinking back down. Even setting the UI to markAsDirtyRecursive on window resize re-draws everything but the charts themselves.

2

Bump.

3

Your observation is right. In some scenarios Charts do not play well in CSS FlexBox. There are couple of workarounds

Wrap your chart in Div

https://github.com/TatuLund/devday-demo-flow/blob/master/src/main/java/com/vaadin/devday/demo/views/ChartUtil.java#L78

That trick helps e.g. when Charts are in Board

See here: https://github.com/TatuLund/devday-demo-flow/blob/master/src/main/java/com/vaadin/devday/demo/views/VaadinBoardView.java

In some other scenarios it is even worse and you need to force the Charts reflow by JavaScript call

    	getUI().ifPresent(ui -> ui.getPage().executeJavaScript("Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"));

See example here: https://github.com/TatuLund/devday-demo-flow/blob/master/src/main/java/com/vaadin/devday/demo/views/SplitLayoutView.java#L32

4

Is this only viable for Vaadin Flow? I’m using V8 and it seems to have the same problem. They grow into free space, but won’t shrink back down again