Styling 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:

  • fillColor: the point label background fill color
  • strokeColor: the color of the label stroke
  • margin: the margin of label
  • textFormat: the string used as a formating string for label value. This format must comply to IEEE printf Specification
  • textColor: the label font color
  • textSize: the size of label font
  • fontName: the font name. If it is missing from the OS the default font is used instead.
  • fontStyle: specify the style of font. Bold , Italic , BoldItalic and Normal values can be used. Defaults to Normal

Example

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

<chart:LineSeries legendTitle="Store scope" showLabels="true" seriesName="Bar" valueProperty="Amount" categoryProperty="Country" items="{{ categoricalSource }}">

           <chart:LineSeries.labelStyle>
               <chart:PointLabelStyle margin="10" fontStyle="Bold" fillColor="#60B3FC" textSize="10" textColor="White" />
           </chart:LineSeries.labelStyle>
       </chart:LineSeries>

       <chart:LineSeries legendTitle="Store scope" showLabels="true" seriesName="Bar" valueProperty="SecondVal" categoryProperty="Country" items="{{ categoricalSource }}">

           <chart:LineSeries.labelStyle>
               <chart:PointLabelStyle margin="10" fontStyle="Bold" fillColor="#FC6060" textSize="10" textColor="White" />
           </chart:LineSeries.labelStyle>
       </chart: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

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.