Jmix 2.x charts does not resize correctly when menu opens up

Support
#1

I noticed that when I have more than 1 Chart, side-by-side (in a HorizontalLayout), and I collapse the menu (charts resizes wider) and then I open up the menu again, the main workspace width adjusts but the Charts will not adjust back to the smaller width.

Is this a bug ?

#3

Hi!

Unfortunately I couldn’t reproduce your problem. When expanding and collapsing the menu, the charts resize correctly. Could you provide a test project that reproduces the problem?

Best regards,
Dmitriy

#5

Here is a View with 3 charts side by side (pie in the middle). If you collapse the side menu and expand it back, all 3 charts will expand but won’t shrink back. If you click on Show Table button, I hide the Pie and show a table, it seems to work (shrinks back). If I click on Hide button and hide the Pie, it also seems to resize back.
chart-demo-view.xml (3.1 KB)

ChartDemoView.java (4.1 KB)

#6

And one more thing. If you edit the xml and make the pieBox visible=“false”, then nothing is shown on the view at all until you make the Pie chart or Grid show up.

If expand the side menu, click on Show Table then click on Hide and then Show Table again, the table is missing.

#7

Hi

This is a feature of the chart component. Initially, the component has a width of 100%. When the visibility area is expanded, the components expand in accordance with the increase in the size of the container in which they are located.

When the area is collapsed, the size is not recalculated, since the container cannot forcibly shrink the chart components nested in it.

As a workaround, you can use flex-grow instead of 100% width for the containers:

<hbox width="100%">
            <vbox classNames="flex-grow">
                <charts:chart id="chart" width="100%" visible="true">
                    <charts:dataSet>
                        <charts:source dataContainer="vehiclesDc"
                                       categoryField="year"
                                       valueFields="cars motorcycles bicycles"/>
                    </charts:dataSet>
                    <charts:series>
                        <charts:bar name="Cars"/>
                        <charts:bar name="Motorcycles" stack="stack"/>
                        <charts:bar name="Bicycles" stack="stack"/>
                    </charts:series>
                    <charts:xAxes>
                        <charts:xAxis/>
                    </charts:xAxes>
                    <charts:yAxes>
                        <charts:yAxis>
                            <charts:axisLabel formatter="{value}"/>
                        </charts:yAxis>
                    </charts:yAxes>
                </charts:chart>
            </vbox>
            <vbox id="pieBox" classNames="flex-grow" visible="true">
                <charts:chart id="pie" width="100%" height="80%" minHeight="30em"
                              alignSelf="STRETCH" visible="true">
                    <charts:series>
                        <charts:pie name="Onboarding Status" radius="50% 80%">
                            <charts:label formatter="{b} : {d}%"/>
                        </charts:pie>
                    </charts:series>
                </charts:chart>
            </vbox>
            <vbox id="tableBox" width="100%" visible="false">
                <dataGrid dataContainer="vehiclesDc" width="100%">
                    <columns>
                        <column property="year"/>
                        <column property="cars"/>
                        <column property="motorcycles"/>
                        <column property="bicycles"/>
                    </columns>
                </dataGrid>
            </vbox>
            <vbox classNames="flex-grow">
                <charts:chart id="funnel"  width="100%"
                              height="100%" visible="true">
                    <charts:legend/>
                    <charts:series>
                        <charts:funnel/>
                    </charts:series>
                </charts:chart>
            </vbox>
        </hbox>
    </layout>
#8

This is because your containers do not have an explicit height, but use a height of 100%. So the charts have a height of 0, because they could not determine one. You need to specify a minHeight for the containers or charts.

Best regards,
Dmitriy