🐦 Grab your early bird tickets for the next NativeScript conference! jsMobileConf is coming back to Boston.

NativeScript Core

RadChart 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-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">
    <chart:RadCartesianChart id="cartesianChart">
        <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.series>
           <chart:SplineAreaSeries items="{{ negativeValues }}" categoryProperty="Period" valueProperty="Amount"></chart:SplineAreaSeries>
        </chart:RadCartesianChart.series>
    </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: