🤖 Create a chatbot for your NativeScript app! Learn more at our upcoming webinar.

NativeScript & Vue.JS

RadChart 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

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() {
      frameModule.topmost().goBack();
    },
  },
};

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

Cartesian chart: Negative Values Cartesian chart: Negative Values