How to get the main window actual height in pixels to manually size charts

I have a built a user configurable dashboard screen which shows some charts. I want to expand the size of the Chart if it is the only chart on the screen configured. If I set the chart height to 100% the chart is not shown. Is this a limitation of charts ?
So if I need to set the size of the chart in Pixels, how do I get the size of the space available ?
How can I get the actual height in pixels of the mainWindow to calculate it ?


Charts like other components work with relative sizes. Probably, the issue occurs due to parent layouts where chart placed. Could you please share XML descriptor code or share a small demo project where problem is reproduced?

I have 3 layers.

  1. Screen which has the dashboard. It will inject one Dashboard Page Fragment.

  2. Dashboard page fragment is layout as such:

<fragment xmlns="">
    <layout expand="chartBox2" spacing="true">
        <hbox id="chartBox1" width="100%" height="AUTO" spacing="false">
            <fragment id="chart11" screen="tcaplos_LosDashboardFragment"/>
            <fragment id="chart12" screen="tcaplos_LosDashboardFragment"/>
            <fragment id="chart13" screen="tcaplos_LosDashboardFragment"/>
            <fragment id="chart14" screen="tcaplos_LosDashboardFragment"/>
        <hbox id="chartBox2" width="100%" height="AUTO" spacing="false">
            <fragment id="chart21" screen="tcaplos_LosDashboardFragment" height="100%"/>
            <fragment id="chart22" screen="tcaplos_LosDashboardFragment" height="100%"/>
            <fragment id="chart23" screen="tcaplos_LosDashboardFragment" height="100%"/>
            <fragment id="chart24" screen="tcaplos_LosDashboardFragment" height="100%"/>
  1. For each chart fragment:
        <groupBox id="chartGrpBox" width="100%">
            <chart:serialChart id="chart" theme="LIGHT"
                    <chart:axis id="axis1" position="LEFT"/>
                    <!-- chart:axis id="axis2" position="RIGHT"/ -->
                <chart:categoryAxis labelRotation="45" minHorizontalGap="0"/>
            <chart:pieChart id="pie" theme="LIGHT" visible="false"
                    <chart:label id="centerLabel" align="CENTER"/>

If I set the Chart height to 100%, the chart doesn’t show. So I had to set the height to 190px.

The Dashboard page fragment expands chartBox2 and automatically set its height = 100%.

The chartBox1 has height = AUTO, it means that this Hbox will occupy space by its content height value, but this content has a relative height size equal to 100%.
And this is a problem: parent has height by its content and child should have height 100% of unknown parent height.

I think you can manage “expanding” programmatically if chartBox1 contains the only chart or chartBox2.


If they both contain charts - reset expanding in order to set equal space for charts:

public void onInit(InitEvent event) {

The other way is to rework the whole layout.

OK Thanks.
Got it to work, by manipulating the component heights and using expand() / resetExpanded() accordingly.