Chart Axes: LinearAxis

RadCartesianChart requires an axis that can represent the values of the data points. The LinearAxis plots the associated data points using each point's actual value, provided for the axis. The axis works with categorical data and uses the Value property of each CategoricalDataPoint that needs to be plotted. It will build a numerical range (user-defined or automatically calculated) and will determine each data point X or Y coordinate (depending on whether the axis is specified as Horizontal or as Vertical).

<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:OhlcSeries
            categoryProperty="Date"
            openPropertyName="Open"
            highPropertyName="High"
            lowPropertyName="Low"
            closePropertyName="Close"
            items="{{ ohlcSourceItems }}">

              <chart:OhlcSeries.horizontalAxis>
                   <chart:DateTimeCategoricalAxis  dateFormat="yyyy-MM-dd" verticalLocation="Bottom" />
              </chart:OhlcSeries.horizontalAxis>
              <chart:OhlcSeries.verticalAxis>
                <chart:LinearAxis/>
              </chart:OhlcSeries.verticalAxis>
            </chart:OhlcSeries>
        </chart:RadCartesianChart.series>
    </chart:RadCartesianChart>
</navigation:ExamplePage>

Features

Major Step

The major step represents the value difference between two visible ticks on the axis. The major step unit is used to determine what exactly the value of the major step represents. To get or set the major step use the majorStep property.

Maximum

Defines the maximum available value. To get or set the maximum use the maximum property.

Minimum

Defines the minimum available value. To get or set the maximum use the minimum property.

Plot Mode

The DateTimeCategoricalAxis allows you to define how exactly the axis will be plotted on the viewport of the chart. The possible values are:

  • BetweenTicks: Points are plotted in the middle of the range, defined between each two ticks.
  • OnTicks: Points are plotted over each tick.
  • OnTicksPadded: Points are plotted over each tick with half a step padding applied on both ends of the axis.

You can get and set the current value with the plotMode property.

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: