Photoshop Question posted in
The official user guide can be found here.

Set Nativescript Chart Lines to Max Width – Photoshop

You can see from the image below, the chart lines don’t go all the way to the edge of the StackLayout container. I’ve tried adding negative margins on the StackLayout but they’re inconsistent depending on how much data I have in the chart and the margins can fluctuate. And between Android & iOS, the margins are always different.

Nativescript Playground sample:
play.nativescript.org/?template=play-ng&id=I8lOBP

This is the bad version:
enter image description here

In the image, you’ll notice on the right and left edges, there’s dark strips of the emulator window. I’m looking for a way for the red area line to touch those edges. It’s hard to see in the image but the bottom also needs to touch the bottom of the StackLayout container.

<StackLayout>
    <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>

Here’s what I want it to look like (credit: photoshop).
enter image description here

Tags:

2

Answers


  1. 0

    You should be setting the horizontalZoom property, probably upping its current value by about 30%.

    Login or Signup to reply.
  2. 0 
    const screen = require("tns-core-modules/platform").screen;

        let widthDIPs = screen.mainScreen.widthDIPs;

    <StackLayout>
    <RadCartesianChart 
                height="100%"
                [width]="widthDIPs"
                class="default-background">
            <CategoricalAxis
               (...)

    src: https://docs.nativescript.org/angular/ui/styling#supported-measurement-units

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search