Chart Axes Styling

If you followed the axes overview section, you know what type of axis is most suitable for the chart you need to created. This article will show you how to change the style of these axes including their lines, ticks and labels.

Using Axis Properties
Styling with CSS
Styling Axis Labels
References

Using Axis Properties

Styling the chart axes is done by using the corresponding customization properties exposed by the axes. All axes used in NativeScript UI Chart have the following properties:

horizontalLocation - Determines the horizontal location of the axis if it is vertical. Can be one of the values of the ChartAxisHorizontalLocation enum.
verticalLocation - Determines the vertical location of the axis if it is horizontal. Can be one of the values of the ChartAxisVerticalLocation enum.
lineColor - Determines the color of the axis' line.
lineThickness - Determines the thickness of the axis' line.
lineHidden - Determines whether the axis line is hidden.
ticksColor - Determines the color of the axis' ticks
ticksLength - Determines the length of the axis' ticks
ticksThickness - Determines the thickness of the axis' ticks
ticksOffset - Determines the offset of the axis' ticks relative to the axis.
ticksHidden - Determines whether the axis ticks are hidden.
labelTextColor - Determines the color of the axis' labels.
labelSize - Determines the text size of the axis' labels.
labelFormat - Determines the format used to display the axis' labels. For example to format values to one symbol after decimal point and append the text seconds, you can use the following format: %.1f seconds.
labelMargin - Determines the margin for the labels. The margin is a single number value and determines the number of device independent pixels between a label and its corresponding axis tick.
labelRotationAngle - Determines the angle of rotation for labels. Used only when labelFitMode property has a value of Rotate.
labelFitMode - Determines the strategy used in attempt to fit the labels. The default value is None which means the labels are positioned on single line but there are Multiline and Rotate options too.
labelLayoutMode - Determines the layout mode for axis labels. With this property you can position labels in the Inner or Outer side of chart.

To better illustrate the usage of Axis properties, we will use a simple scenario in which the Axes are customized:

Example 1: Apply axis styles through html

<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <LinearAxis tkCartesianHorizontalAxis labelTextColor="Green" lineHidden="false" labelSize="10" lineThickness="3" lineColor="Green"></LinearAxis>
    <CategoricalAxis tkCartesianVerticalAxis labelTextColor="#cb4b16" labelSize="10" lineThickness="3" lineColor="Red"></CategoricalAxis>

    <BarSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></BarSeries>
</RadCartesianChart>

This is how the chart looks like now:

Figure 1: Axis styles on Android (left) and iOS (right)

Axis styling

Styling with CSS

All of the above properties can also be applied through css. Here's how to apply the styles from the previous example through CSS:

Example 2: Apply axis styles through css

LinearAxis {
    label-text-color: green;
    line-hidden: false;
    label-size: 10;
    line-thickness: 3;
    line-color: green;
}
CategoricalAxis {
    label-text-color: #cb4b16;
    label-size: 10;
    line-thickness: 3;
    line-color: red;
}

Styling Axis Labels

Axis labels can be styled using the above label-related properties. Information about additional options for styling the labels of the axis in NativeScript UI Chart is available here.

References

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

Examples used in this article:

Customization Example

NativeScript Angular