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

NativeScript Core

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

Example

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

<chart:LineSeries
    legendTitle="Previous Year Sales"
    showLabels="true"
    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="Current Year Sales"
    showLabels="true"
    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.