Chart Axes: Negative Values

By default the LinearAxis supports the use of negative values. You can set the minimum minimum and/or the maximum to negative values

Example

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-pro-ui/chart" xmlns="http://www.nativescript.org/tns.xsd">
    <chart:RadCartesianChart id="cartesianChart">
        <chart:RadCartesianChart.series>
           <chart:SplineAreaSeries seriesName="SplineArea" items="{{ negativeValues }}"  categoryProperty="Period" valueProperty="Amount">

           </chart:SplineAreaSeries>
        </chart:RadCartesianChart.series>
         <chart:RadCartesianChart.verticalAxis>
            <chart:LinearAxis  allowZoom="true" minimum="-50" maximum="50"/>                 
        </chart:RadCartesianChart.verticalAxis>

        <chart:RadCartesianChart.horizontalAxis>
            <chart:CategoricalAxis  allowZoom="true"/>
        </chart:RadCartesianChart.horizontalAxis>

    </chart:RadCartesianChart>
</navigation:ExamplePage>

This is how the chart will look like with negative values on the Y axis:

Cartesian chart: Negative Values Cartesian chart: Negative Values

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: