NativeScript Angular

Styling Chart Point Labels

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
<LineSeries tkCartesianSeries
    legendTitle="Previous Year Sales"
    showLabels="true"
    seriesName="Bar"
    valueProperty="Amount"
    categoryProperty="Country"
    [items]="categoricalSource">
    <PointLabelStyle tkLineLabelStyle margin="10" fontStyle="Bold" fillColor="#60B3FC" textSize="10" textColor="White"></PointLabelStyle>
</LineSeries>

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

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