moving a multi-series chart from one component to another crush the browser

[MingjieZhu]

Running Vaadin 14.5.3, with vaadin chart 18.0.3 (tested in Column chart and Bar chart)

1. have a multi-series chart that contains 20+ series. (takes about 2 seconds to load, which is fine)
2. parentDiv.remove(chart); anotherDiv.add(chart); -->> this freeze the browser for 10 seconds and then errors out.

single series chart do not have the problem.
chart with 5 series takes 1 seconds to load will take 8 seconds to move from one component to another.

[MingjieZhu]

We have a dashboard that contains 2 different layouts. And need to switch all the charts between those 2 layout. We do not have the problem in Vaadin 8.

[vlukashov]

Might be related to vaadin/web-components#227

[MingjieZhu]

Toggling between stacked / non-stacked for a chart with large series also extremely slow. Seems all related to the link above. Loops with series.

[MingjieZhu]

Is there an estimated date that this issue will be fixed? We need this in our production systems.

[alvarezguille]

Similar approach to the one in vaadin/web-components#2348 using redraw false in the calls from __updateOrAddSeries to __updateOrAddSeriesInstance could improve performance in Chart.java when having many series.
https://github.com/vaadin/web-components/blob/c9694d6549bff1f7fffb9ece26178e57fc228a51/packages/vaadin-charts/src/vaadin-chart.js#L1450-L1453

[vursen]

Hello @MingjieZhu!

I'm here to inform you that we have improved the chart performance in vaadin/vaadin-charts#584. Please, update your application to the Vaadin 14.7.3 and confirm that the problem has been solved.

[tomivirkki]

Created the following test view, trying to reproduce the issue as described:

@Route(value = "chart")
public class ChartView extends Div {

    private Chart chart = new Chart(ChartType.COLUMN);
    private Div parentDiv = new Div();
    private Div anotherDiv = new Div();

    public ChartView() {
        add(new Button("Move chart under the other div", e -> {
            parentDiv.remove(chart);
            anotherDiv.add(chart);
        }));

        add(new H2("parentDiv"), parentDiv);
        add(new H2("anotherDiv"), anotherDiv);

        Configuration conf = chart.getConfiguration();
        conf.setTitle("Title");
        conf.setSubTitle("Subtitle");

        for (int i = 0; i < 30; i++) {
            ListSeries series = new ListSeries("Series " + i);
            for (int j = 0; j < 8; j++) {
                series.addData(Math.round(Math.random() * 10000));
            }
            conf.addSeries(series);
        }

        parentDiv.add(chart);
    }
}

Ran it in a Vaadin 14.8.2 application without any hiccups so I assume the issue has been fixed (by vaadin/vaadin-charts#584)

move-charts.mp4

Please let us know if the issue is still there and preferably attach a minimal example with which it can be reproduced. Closing for now.