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

NativeScript & Vue.JS

RadChart Point Labels Styling

In order to show series default labels you should set the showLabels property of each series to true. By default its value is false. If you want to style the point labels that are shown for series values you can initialize the labelStyle property of the series with instance of PointLabelStyle. Supported properties are:

Example

To better illustrate styling of point label let's look at the following example:

  • Declare the LineSeries instances, bind their items to the source of data and set the tkCartesianSeries directive
  • In order to customize the labelStyle open and close an PointLabelStyle tag between the LineSeries tags and set the tkLineLabelStyle directive on it
export default {
  name: 'StylingLabels',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <RadCartesianChart>
      <CategoricalAxis v-tkCartesianHorizontalAxis></CategoricalAxis>
      <LinearAxis v-tkCartesianVerticalAxis></LinearAxis>

      <LineSeries v-tkCartesianSeries
                  legendTitle="Previous Year Sales"
                  showLabels="true"
                  valueProperty="Amount"
                  categoryProperty="Country"
                  :items="items">
          <PointLabelStyle v-tkLineLabelStyle margin="10" fontStyle="Bold" fillColor="#60B3FC" textSize="10" textColor="White"></PointLabelStyle>
      </LineSeries>

      <LineSeries v-tkCartesianSeries
                  legendTitle="Current Year Sales"
                  showLabels="true"
                  valueProperty="SecondVal"
                  categoryProperty="Country"
                  :items="items">
          <PointLabelStyle v-tkLineLabelStyle margin="10" fontStyle="Bold" fillColor="#FC6060" textSize="10" textColor="White"></PointLabelStyle>
      </LineSeries>

      <RadLegendView v-tkCartesianLegend position="Top" height="150"></RadLegendView>
    </RadCartesianChart>
  </Page>
  `,
  data () {
    return {
      title: description,
      items: getCountriesData(),
    };
  },
  methods: {
    onNavigationButtonTap() {
      frameModule.topmost().goBack();
    },
  },
};

This is how the chart looks like now:

iOS:

Axis styling

Android:

Axis styling

Axes Labels

All axes have their default labels. They are visible by default. In order to display or hide them, you simply need to use the showLabels property of the axis. If you want to learn more about styling axis labels please visit Axis Styling