Grid row details and chart

Hi,

I use Vaadin 14.0.3 and chart component.

When I add chart to Grid row detail, the chart appears above the clicked row.

Example to reproduce it.

Grid:

        Grid<User> grid = new Grid();

        grid.addColumn(new ComponentRenderer<>(t -> {
            return new Label(t.getId().toString());
        })).setHeader("Column1").setSortable(true);
		
		grid.setItemDetailsRenderer(new ComponentRenderer<>(user -> addChartToGrid()));
        grid.setDetailsVisibleOnClick(true);
        add(grid);

Chart:

    private Chart addChartToGrid() {

        Chart chart = new Chart(ChartType.LINE);
        chart.setTimeline(true);
        Title title = new Title();

        title.setText("TEST");
        title.setUseHTML(true);
        chart.getConfiguration().setTitle(title);

        return chart;
    }

This is the grid

When i click in row 31 for example, the chart start in row 22

Thanks, regards

I haven’t tested this myself, but I have noticed in some other occasions that Chart needs to be wrapped in Div in order to layout correctly. So I would first try modify the component renderer so that it returns Div which has the Chart inside it.

Tatu Lund:
I haven’t tested this myself, but I have noticed in some other occasions that Chart needs to be wrapped in Div in order to layout correctly. So I would first try modify the component renderer so that it returns Div which has the Chart inside it.

Hi, thanks for your reply.

I tried to wrap in a Div but it hasn’t changed.

private Div addChartToGrid() {
	............
	return new Div(chart);
}