V14 Chart responsive

Hello everyone
I’m currently working on charts and it’s currently not responsive unlike the demo and I can’t find a code snippet on that demo code. (https://demo.vaadin.com/charts/Column)

Any Idea what I could do?

This usually depends on the parent component

In what container are you adding the chart? Horizonal/VerticalLayout?

Might sound weird but it’s in a Div, which is in a HorizontalLayout and that is in a VerticalLayout

That’s strange

In my app this works fine

does the div have full size?

could it be because i’ve got two different charts in one HorizontalLayout?

(both charts are in a Div each)

as far as I know yes

can you show the coee?

VerticalLayout siteLayout = new VerticalLayout();
siteLayout.setWidthFull();

HorizontalLayout horizontalLayout = new HorizontalLayout();
horizontalLayout.getStyle().set("margin-top", "25px");
horizontalLayout.setJustifyContentMode(JustifyContentMode.END);

Chart yearlyDocsChart = new Chart(ChartType.COLUMN);
Chart docTypesChart = new Chart(ChartType.PIE);

Div div1 = new Div();
div1.add(yearlyDocsChart);

Div div2 = new Div();
div1.add(docTypesChart);

horizontalLayout.add(div1, div2);
siteLayout.add(horizontalLayout);
add(siteLayout);

not the prettiest code haha

the charts have configurations etc. just thought might not be relevant

call setSizeFull() on div1, div2 and the two charts

hmm kinda weird

it doesn’t really get responsive, i just get a horizontal scroll

and if you remove the setSizeFull from the charts and only have the Divs size full?

nope :/

oh now i got it