Nativescript UI chart: resize problem (android)

[tsonevn]

From @attdona on December 5, 2017 10:52

Description

Three is a resize problem with a chart component inserted into a content area of a drawer based app.

At app start all is ok:

After an app resume or a click on Home drawer menu item the chart is nor rendere correctly:

Which platform(s) does your issue occur on?

Android (IOS not tested)

Please provide the following version numbers that your issue occurs with:

• CLI: 3.3.0
• Cross-platform modules: 3.3.0
• Runtime(s): 3.3.1
• Plugin(s): nativescript-pro-ui 3.2.0

How to recreate the issue

The RadSideDrawer.mainContent:

     <nsDrawer:RadSideDrawer.mainContent>

            <GridLayout columns="*" rows="auto, *" class="page-content">
                <Label row="0" col="0" class="center" text="Online Users"/>
                <chart:RadCartesianChart row="1" col="0" height="1000" class="graph" id="cartesianChart">
                    <chart:RadCartesianChart.series>
                        <chart:BarSeries items="{{ categoricalSource }}" categoryProperty="Day" valueProperty="Amount">

                            <chart:BarSeries.horizontalAxis>
                                <chart:CategoricalAxis/>
                            </chart:BarSeries.horizontalAxis>
                            <chart:BarSeries.verticalAxis>
                                <chart:LinearAxis majorStep="5" labelFormat="%.0f"/>
                            </chart:BarSeries.verticalAxis>
                        </chart:BarSeries>
                    </chart:RadCartesianChart.series>
                </chart:RadCartesianChart>
            </GridLayout>
        </nsDrawer:RadSideDrawer.mainContent>

The nativescript demo project that shows the problem:

demo.tar.gz

Greetings Attilio

Copied from original issue: NativeScript/NativeScript#5132

[tsonevn]

Hi @attdona, The issue with the Chart resizing seems to be related to the fact that the height property is setup to 1000, while the component in setup inside the GridLayout. When you use this type of layout you do not need to setup the height property. In your case removing the height="1000" would solve the issue.

<nsDrawer:RadSideDrawer.mainContent>

            <GridLayout columns="*" rows="auto, *" class="page-content">
                <Label row="0" col="0" class="center" text="Online Users"/>
                <chart:RadCartesianChart row="1" col="0"  class="graph" id="cartesianChart">
                    <chart:RadCartesianChart.series>
                        <chart:BarSeries items="{{ categoricalSource }}" categoryProperty="Day" valueProperty="Amount">

                            <chart:BarSeries.horizontalAxis>
                                <chart:CategoricalAxis/>
                            </chart:BarSeries.horizontalAxis>
                            <chart:BarSeries.verticalAxis>
                                <chart:LinearAxis majorStep="5" labelFormat="%.0f"/>
                            </chart:BarSeries.verticalAxis>
                        </chart:BarSeries>
                    </chart:RadCartesianChart.series>
                </chart:RadCartesianChart>
            </GridLayout>
        </nsDrawer:RadSideDrawer.mainContent>

However, if you need to specify the height, you need to do that in the GridLayout rows property for example:

<nsDrawer:RadSideDrawer.mainContent>

            <GridLayout columns="*" rows="auto, 200" class="page-content">
                <Label row="0" col="0" class="center" text="Online Users"/>
                <chart:RadCartesianChart row="1" col="0" class="graph" id="cartesianChart">
                    <chart:RadCartesianChart.series>
                        <chart:BarSeries items="{{ categoricalSource }}" categoryProperty="Day" valueProperty="Amount">

                            <chart:BarSeries.horizontalAxis>
                                <chart:CategoricalAxis/>
                            </chart:BarSeries.horizontalAxis>
                            <chart:BarSeries.verticalAxis>
                                <chart:LinearAxis majorStep="5" labelFormat="%.0f"/>
                            </chart:BarSeries.verticalAxis>
                        </chart:BarSeries>
                    </chart:RadCartesianChart.series>
                </chart:RadCartesianChart>
            </GridLayout>
        </nsDrawer:RadSideDrawer.mainContent>

[attdona]

The height attribute is reminiscent of my attempts ... removing it does not work.

I did some more test and I report that the issue is evident (only?) for version android-19 (KitKat 4.4).

I can reproduce either with the emulator or with a physical device with android 4.4.4

[tsonevn]

Hi @attdona, Excuse me for the delay in reply. I investigated this problem further and I have to confirm that this is a real issue, which is reproducible only on Android API level 19. I will change the label of the issue to bug. At this time I would suggest keeping track on the issue for further info.