Charts won't Extend to the Edge

[razorsyntax]

Tell us about the problem

The chart lines don't extend to the end of the StackLayout. Both Android and iOS have this problem. Negative margins are ineffective and inconsistent as the chart builds.

What it currently looks like:

What I want it to look like. (made in Photoshop)

With photos and breakdown of detailed explanation.
Stackoverflow link to answer this if answer exists

Which platform(s) does your issue occur on?

Both Android & iOS

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

• nativescript-u-chart version 5.0.0
• CLI version 6.1.2
  -tns-core-modules version 6.1.1
• Runtime:
  Android 6.1.1
  iOS 6.1.2

Please tell us how to recreate the issue in as much detail as possible.

Code snippet:

 <StackLayout height="100%" width="100%">
        <RadCartesianChart 
                height="100%"
                width="100%"
                class="default-background">
            <CategoricalAxis
                lineColor="#f5f5f5" 
                hidden="true" 
                lineHidden="true" 
                lineThickness="1"
                labelLayoutMode="Inner"
                tkCartesianHorizontalAxis>
            </CategoricalAxis>
            <LinearAxis
                lineColor="#f5f5f5"
                hidden="true" 
                lineHidden="true" 
                lineThickness="1"
                labelLayoutMode="Inner" 
                [maximum]="max"
                [minimum]="min"
                tkCartesianVerticalAxis>
            </LinearAxis>
            <AreaSeries
                tkCartesianSeries 
                seriesName="Area" 
                showLabels="false" 
                categoryProperty="Date" 
                [items]="areaSource$ | async"
                valueProperty="Amount" 
                selectionMode="None">
            </AreaSeries>
            <RadCartesianChartGrid 
                tkCartesianGrid 
                horizontalLinesVisible="false" 
                verticalLinesVisible="false" 
                verticalStripLinesVisible="false"
                horizontalStripLinesVisible="false" 
                horizontalStrokeColor="#181818">
            </RadCartesianChartGrid>
            <Palette tkCartesianPalette seriesName="Area">
                <PaletteEntry
                    tkCartesianPaletteEntry
                    opacity="1" 
                    [fillColor]="fillColor"
                    [strokeColor]="lineColor"
                    android:strokeWidth="4"
                    ios:strokeWidth="2">
                </PaletteEntry>
                <PaletteEntry 
                    tkCartesianPaletteEntry 
                    [fillColor]="fillColor" 
                    strokeColor="#181818" 
                    strokeWidth="0">
                </PaletteEntry>
            </Palette>
        </RadCartesianChart>
    </StackLayout>

[tsonevn]

Hi @razorsyntax,
I've checked your case with our sample here. On that matter, for Android, the chart must be appropriately stretched on the screen. Perhaps, there is some CSS that is set to the Chart or its parent layout container, that can set some padding or margin. For iOS, currently, the chart can not be stretched when the device is in a landscape mode. I will mark this as a feature for iOS and we will investigate further, how to add similar functionality.

[razorsyntax]

Thanks for checking it out! For both Android and iOS, I'm only using portrait mode. As for some CSS, I haven't found a combination that'll work either on the parent or the chart itself to stretch the charts to the edges.

Thanks again!

[razorsyntax]

@tsonevn Oh... be sure to add a label for os:android as well!

[razorsyntax]

Manoj had a specific answer for this on the Stackoverflow and then recommended this as an issue:
https://stackoverflow.com/questions/58684506/set-nativescript-chart-lines-to-max-width