🤖 Create an engaging chatbot from scratch and add it to your NativeScript app! Learn more at our webinar on March 28th.

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:


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="Financial data" showLabels="true" seriesName="Bar" valueProperty="Amount" categoryProperty="Country"
    <PointLabelStyle tkLineLabelStyle margin="10" fontStyle="Bold" fillColor="#60B3FC" textSize="10" textColor="White"></PointLabelStyle>

<LineSeries tkCartesianSeries legendTitle="Financial data" showLabels="true" seriesName="Bar" valueProperty="SecondVal" categoryProperty="Country"
    <PointLabelStyle tkLineLabelStyle margin="10" fontStyle="Bold" fillColor="#FC6060" textSize="10" textColor="White"></PointLabelStyle>

This is how the chart looks like now:


Axis styling


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