Chart Negative Values

If you followed the getting started article, you now know how to create a chart and add it to a NativeScript page. In this article, you will see an example of using negative values and see how the chart will render them.

• Getting Started
• References

Getting Started

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

Example 1: Using Negative Values

export const getNegativeValues = () => {
  return new ObservableArray([
      { Period: 1, Amount: 10 },
      { Period: 2, Amount: -10 },
      { Period: 3, Amount: 20 },
      { Period: 4, Amount: -20 },
      { Period: 5, Amount: 30 },
      { Period: 6, Amount: -30 },
      { Period: 7, Amount: 40 },
      { Period: 8, Amount: -40 },
      { Period: 9, Amount: 50 },
      { Period: 10, Amount: -50 }
  ]);
};

import { getNegativeValues } from '../../data';

const description = 'Negative Values';

export default {
  name: 'NegativeValues',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <RadCartesianChart>
      <LinearAxis v-tkCartesianVerticalAxis allowZoom="true" minimum="-50" maximum="50"></LinearAxis>
      <CategoricalAxis v-tkCartesianHorizontalAxis allowZoom="true"></CategoricalAxis>

      <SplineAreaSeries v-tkCartesianSeries :items="items" categoryProperty="Period" valueProperty="Amount"></SplineAreaSeries>
    </RadCartesianChart>
  </Page>
  `,
  data () {
    return {
      title: description,
      items: getNegativeValues(),
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
  },
};

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

Figure 1: Chart with negative values on Android (left) and iOS (right)

References

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

Examples used in this article:

• Negative Values Example

Related articles you might find useful:

• Axes Overview
• Series Overview
• Spline Series