CODEWITHSUNDEEP
vaadinvaadin-flowvaadin-charts
Jonathan Sylvester
Jonathan Sylvester

Reputation: 1329

Vaadin chart not using up correct width

In Vaadin 14.6.1, I have created a horizontal layout with 2 charts (and some other stuff). The charts are not using up the correct width -- they seem to not "pick up" on the right width (see screenshot below). I set the width to 100% etc. Also, this problem disappears if I use a simpler component, such as label, instead of charts (from Highcharts). I've experienced a similar problem before, but in more complex settings (e.g. a user adjusts the splitlayout and the underlying chart does not resize). But in this case, it's an even more reasonably straightforward scenario (i.e. no adjustment by user of the width of any layout) and yet Vaadin doesn't seem to pick up the right width, at least when using charts. Is this a known or reproducible issue? If so, any workaround?

1

Upvotes: 2

Views: 195

Answers (1)

Tatu Lund
Tatu Lund

Reputation: 10633

Charts indeed behave badly with some layouts. I have noticed two cases. The other is the Board component, where the workaround is just simply wrap Chart inside Div, i.e.

Div div = new Div();
div.add(chart);
// and then add div to Board

SplitLayout is more tricky. You need to call Chart to reflow after splitter has been moved. Something like the following finds all the charts and forces them to redraw.

splitLayout.addSplitterDragendListener(event -> {
    getUI().ifPresent(ui -> ui.getPage().executeJs(
        "Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"));
});

Note, if you have only one chart or have conveniently the references to chart instances you can do

chart.getElement().executeJs("$0.__reflow();", chart.getElement());

Upvotes: 4

Related Questions