How to combine any of the ApexChartWrapper with other vaadin components/layouts

[avasin]

Hi, guys! From the first glance I was under impression of the library, but then when I started to combine my existing layouts with new ApexCharts instance I've found that it is impossible to place e.g. Grid instance and ApexCharts instance one above another and make them fit into a user screen.
Probably I'm asking a nub question because I've just started with Vaadin, but all other components were perfectly fit in Horizontal/Vertical layouts. ApexCharts instance in my case can be very small or very big here is the code
In case I'm wrapping charts with FlexLayout I'm getting very-small chart,
in case I'm wrapping it with Div I'm getting fullpage chart and grid goes out of the page. :

public class MainView extends AppLayout {
    private static final long serialVersionUID = -5804211225262230543L;
    private final Collection<RecommendationDto> recommendations = new HashSet<>();

    public MainView() {
        final VerticalLayout layout = new VerticalLayout();
        final Div wr = new Div();
        wr.setWidthFull();
        layout.add(wr);
        layout.add(createRecommendationsGrid());
        layout.setSizeFull();
        setContent(layout);
        wr.add(new FlexLayout(createChart()));
    }

    private ApexCharts createChart() {
        final ApexCharts candleStick_chart = ApexChartsBuilder.get()
                        .withChart(ChartBuilder.get().withType(Type.candlestick).build())
                        .withTitle(TitleSubtitleBuilder.get().withText("CandleStick Chart")
                                        .withAlign(Align.left).build()).withSeries(createSeries())
                        .withXaxis(XAxisBuilder.get().withType(XAxisType.datetime).build())
                        .withYaxis(YAxisBuilder.get()
                                        .withTooltip(TooltipBuilder.get().withEnabled(true).build())
                                        .build()).build();
        candleStick_chart.setWidthFull();
        return candleStick_chart;
    }

    private Series<? extends Coordinate<String, ? extends Number>> createSeries() {
        return new Series<>(new Coordinate<>(getISOString(1538778600000L), 6629.81, 6650.5, 6623.04,
                        6633.33),
                        new Coordinate<>(getISOString(1538780400000L), 6632.01, 6643.59, 6620,
                                        6630.11),
                        new Coordinate<>(getISOString(1538782200000L), 6630.71, 6648.95, 6623.34,
                                        6635.65),
                        new Coordinate<>(getISOString(1538784000000L), 6635.65, 6651, 6629.67,
                                        6638.24),
                        new Coordinate<>(getISOString(1538785800000L), 6638.24, 6640, 6620,
                                        6624.47),
                        new Coordinate<>(getISOString(1538787600000L), 6624.53, 6636.03, 6621.68,
                                        6624.31),
                        new Coordinate<>(getISOString(1538789400000L), 6624.61, 6632.2, 6617,
                                        6626.02),
                        new Coordinate<>(getISOString(1538791200000L), 6627, 6627.62, 6584.22,
                                        6603.02),
                        new Coordinate<>(getISOString(1538793000000L), 6605, 6608.03, 6598.95,
                                        6604.01),
                        new Coordinate<>(getISOString(1538794800000L), 6604.5, 6614.4, 6602.26,
                                        6608.02),
                        new Coordinate<>(getISOString(1538796600000L), 6608.02, 6610.68, 6601.99,
                                        6608.91),
                        new Coordinate<>(getISOString(1538798400000L), 6608.91, 6618.99, 6608.01,
                                        6612),
                        new Coordinate<>(getISOString(1538800200000L), 6612, 6615.13, 6605.09,
                                        6612),
                        new Coordinate<>(getISOString(1538802000000L), 6612, 6624.12, 6608.43,
                                        6622.95),
                        new Coordinate<>(getISOString(1538803800000L), 6623.91, 6623.91, 6615,
                                        6615.67),
                        new Coordinate<>(getISOString(1538805600000L), 6618.69, 6618.74, 6610,
                                        6610.4),
                        new Coordinate<>(getISOString(1538807400000L), 6611, 6622.78, 6610.4,
                                        6614.9),
                        new Coordinate<>(getISOString(1538809200000L), 6614.9, 6626.2, 6613.33,
                                        6623.45),
                        new Coordinate<>(getISOString(1538811000000L), 6623.48, 6627, 6618.38,
                                        6620.35),
                        new Coordinate<>(getISOString(1538812800000L), 6619.43, 6620.35, 6610.05,
                                        6615.53));

    }

    private static String getISOString(long l) {
        return LocalDateTime.ofInstant(Instant.ofEpochMilli(l), ZoneId.systemDefault())
                        .format(DateTimeFormatter.ISO_LOCAL_DATE_TIME);
    }

    

    private static Grid<RecommendationDto> createRecommendationsGrid() {
        final Grid<RecommendationDto> result = new Grid<>();
        result.setSelectionMode(SelectionMode.MULTI);
        result.addColumn(new OfferBasedValueProvider<>(AvailableOrderDto::getSecurityReference,
                        stockReference -> {
                            final String exchangeName = stockReference.getExchangeName();
                            final String stockId =
                                            stockReference.getSecurity().getStockId().toUpperCase();
                            return exchangeName + ":" + stockId;
                        })).setHeader("Stock reference");
        result.addColumn(RecommendationDto::getOperationType).setHeader("Operation type");
        result.addColumn(RecommendationDto::getDescription).setHeader("Description");
        result.addColumn(RecommendationDto::getState).setHeader("State");
        result.addColumn(RecommendationDto::getReliability).setHeader("Realibility");
        result.addColumn(
                        new OfferBasedValueProvider<>(AvailableOrderDto::getPrice, String::valueOf))
                        .setHeader("Price");
        result.addColumn(new OfferBasedValueProvider<>(AvailableOrderDto::getVolume,
                        String::valueOf)).setHeader("Volume");
        result.setWidthFull();
        return result;
    }
}```

[appreciated]

Can you check if the behaviour was improved in the new version?

[TFyre]

Im having a similar issue using beta12.

When it renders initially, its too big, after clicking left or right, it fixes itself and renders correctly

@Route(value = "demo")
public class ChartDemo extends VerticalLayout {

    private int counter = 5;
    private final HorizontalLayout chartHolder = new HorizontalLayout();

    public ChartDemo() {
        setSizeFull();
        chartHolder.setSizeFull();
        add(buildHeader(), chartHolder, buildFooter());
        drawChart();
    }

    private Component buildHeader() {
        final HorizontalLayout result = new HorizontalLayout();
        result.setWidthFull();
        result.setJustifyContentMode(JustifyContentMode.CENTER);
        result.add(
                new Button("Left", new Icon(VaadinIcon.ARROW_LEFT), e -> {
                    counter--;
                    drawChart();
                }),
                new Button("Right", new Icon(VaadinIcon.ARROW_RIGHT), e -> {
                    counter++;
                    drawChart();
                })
        );

        return result;
    }

    private Component buildFooter() {
        final VerticalLayout result = new VerticalLayout();
        result.setWidthFull();
        result.setAlignItems(Alignment.CENTER);
        result.add(
                new Span("Footer1"),
                new Span("Footer2"),
                new Span("Footer3")
        );
        return result;
    }

    private void drawChart() {
        final ApexCharts chart = ApexChartsBuilder.get()
                .withChart(ChartBuilder.get()
                        .withType(Type.area)
                        .build()
                )
                .withTitle(TitleSubtitleBuilder.get().withText("ChartTitle").build())
                .withSeries(new Series<>("Series1", counter * 10, counter * 10 + 2, counter * 10 + 4))
                .build();
        chart.setSizeFull();
        chartHolder.removeAll();
        chartHolder.add(chart);

    }

}

[mathzol]

I found a solution, kinda workaround, but still using only the library method.

 .withChart(ChartBuilder.get()
          .withType(Type.bar)
          .withEvents(
                  EventsBuilder.get().withMounted(
                          "function(chartContext, config) { chartContext.update(); }"
                  ).build()
          )
          .build())

Use the "mounted" event to update chart after it drawed. This will fix the mentioned layout render issue.