NativeScript & Vue.JS

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

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)

Cartesian chart: Negative Values Cartesian chart: Negative Values

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:

Related articles you might find useful: